[JS] fetch 함수 - API 호출하기 (GET, POST)

Fetch API는 JavaScript에서 HTTP 요청을 보낼 수 있는 현대적인 인터페이스입니다. 예전의 XMLHttpRequest보다 훨씬 더 강력하고 유연하게 서버와 데이터를 주고받을 수 있게 해 줍니다. Fetch를 사용하면 JSON, HTML 같은 리소스를 쉽게 요청하고 처리할 수 있습니다.

 

 

JavaScript의 Fetch 함수

 

목차

1. fetch() 기본 사용법

2. fetch() 옵션

3. fetch() - POST 요청

4. API 호출 함수

5. fetch() 오류 처리

마무리

추천글

 

fetch() 기본 사용법

fetch() 메서드는 URL을 받아 HTTP 요청을 보낸 후, 응답을 Promise로 반환합니다. 다음은 간단한 GET 요청의 예시입니다.

fetch('https://jsonplaceholder.typicode.com/todos/')
      .then(response => response.json())
      .then(json => console.log(json))

 

await을 사용해서도 호출할 수 있습니다.

const response = await fetch('https://jsonplaceholder.typicode.com/todos/');
const jsonResponse = await response.json(); // 응답을 파싱해 js 객체로 가져옴
const textResponse = await response.text(); // 응답을 문자열 그대로 가져옴

console.log(jsonResponse);

 

위 두 코드의 결과를 확인해 보겠습니다.

fetch() - GET 요청 결과

 

fetch() 메소드를 이용하여 get요청 시 여러 개의 params가 필요할 경우 아래처럼 사용할 수 있습니다.

const params = { offset: 10, limit: 10};
const url = new URL('요청할 API URL');
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));

const response = await fetch(url);
const data = await response.json();
console.log(data);

 

fetch() 옵션

 

• method: HTTP 메서드를 지정합니다 (GET, POST, PATCH, DELETE  등). method를 성정하지 않으면 기본 값은 GET
• headers: 요청 헤더를 정의하며, 여기서는 콘텐츠 타입을 지정합니다. 자주 설정하는 헤더로는 'Content-Type'이 있습니다.
• body: 전송할 데이터를 지정하며, 주로 JSON 형식으로 변환하여 보냅니다.

fetch() 전역 함수 - Web API | MDN

 

 

POST 요청

POST 메서드를 사용하여 데이터를 서버에 보낼 수도 있습니다. 다음은 JSON 데이터를 서버에 보내는 예시입니다.

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
  headers: {
    "Content-type": "application/json; charset=UTF-8",
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

POST 요청 결과

{ 
  title: 'foo', 
  body: 'bar', 
  userId: 1, 
  id: 101 
}

 

API 호출 함수

리퀘스트를 보내는 코드를 반복적으로 사용한다면 함수로 만들어 사용하는 것이 좋습니다. API를 호출하는 함수들을 따로 모아 두고 필요할 때 import 해서 사용하면 편리하겠죠? API를 호출하는 함수를 만들어 보겠습니다.

// api.js
export async function getPosts(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  const data = await response.json();
  return data;
}

// main.js
import { getPosts } from "./api.js";

const data = await getPosts(1);
console.log(data);

 

API를 호출하는 getPosts 함수는 필요할 때 파라미터만 바꿔서 활용하면 됩니다.

 

fetch() 오류 처리

요청(request)을 보낼 때 발생하는 오류는 두 가지로 나뉩니다.

1. URL이나 헤더 정보가 이상해 요청(request) 자체가 실패하는 경우
2. 요청( request )은 성공했지만 상택 코드가 실패를 나타내는 경우(예: 404, 500 오류)

2번 예시처럼 요청이 성공하더라도, 결과가 예상과 다를 수 있습니다. 따라서 응답의 상태 코드를 확인하는 것이 중요합니다.

• response.status: 상태 코드를 반환하며, 예를 들어 404는 "Not Found"를 의미합니다.
• response.ok: HTTP 상태 코드가 200-299 범위일 때 true를 반환합니다.

fetch() 오류를 깔끔하게 처리하기 위해서는 오류 1번과 2번 모두 오류를 throw 해야 합니다. response.ok 프로퍼티로 오류를 처리해 보겠습니다.

// api.js
export async function getPosts(id) {
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  
  if(!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  
  const data = await response.json();
  return data;
}

// main.js
import { getPosts } from "./api.js";

try {
  const data = await getPosts('q');
  console.log(data);
} catch(e) {
  console.log('오류가 발생했습니다.', e.message);
}

 

오류가 발생했습니다. HTTP error! status: 404

 

위 코드에서 에러를 발생시키기 위해 파라미터로 'q'를 전달했습니다. 결과를 확인해보겠습니다. 요청(request)이 성공했지만, 404("Not Found")가 출력된 것을 확인할 수 있습니다.

 

 

 

 

Fetch API는 자바스크립트에서 비동기 HTTP 요청을 수행하는 강력한 도구입니다. Promise 지원, 간편한 에러 처리, 그리고 async/await을 통한 깔끔한 문법 덕분에, 현대 JavaScript 개발자에게 필수적인 기술입니다.

 

 

추천글

2024.09.21 - [개발 공부 일지/JavaScript] - [JS] 자바스크립트 비동기 - Promise

[JS] 자바스크립트 비동기 - Promise