[JS] 자바스크립트 fetch API 사용하기

자바스크립트 fetch API를 이용하여 비동기 HTTP 요청을 보낼 수 있습니다. API를 호출하고 데이터를 받는 방법을 알아보겠습니다.

 

요약

- fetch함수를 사용하면 리소스를 비동기로 요청할 수 있습니다.

- fetch를 호출하면 브라우저는 요청을 보내고 Promise 객체를 반환합니다. 요청이 완료되면 성공 여부에 상관없이 Promise가 resolved 되어 Response 객체가 반환됩니다. (404, 500 같은 경우와 같은 응답 코드를 받은 경우는 에러를 일으키지 않습니다.)

- HTTP 요청이 완료되지 못한 상태라면 Promise가 rejected 됩니다. 이 경우 catch 메서드를 사용하여 에러를 처리할 수 있습니다. (네트워크 문제 및 존재하지 않는 사이트에 대한 요청에 해당합니다.)

- Response 객체는 응답에 대한 정보를 담고 있습니다. ok, status 속성을 이용하여 응답 성공 여부를 확인할 수 있습니다.

 

 

fetch API 사용하기

fetch 함수를 사용해보기 위해서 JSONPlaceholder라는 Fake REST API 서비스를 이용하겠습니다. https://jsonplaceholder.typicode.com/todos로 접속하면 아래 사진과 같은 json 형식의 API 응답 결과를 확인할 수 있습니다. todos는 총 200개의 데이터가 있습니다.

 

 

GET

아래 코드는 요청이 성공할 경우 then에서 response 객체를 받아 처리하고 최종적으로 그 결과를 출력합니다. 요청이 완료되지 못해 에러가 발생하면 catch에서 처리합니다.

 

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => {
    // response 처리
    console.log(res);
    // 응답을 JSON 형태로 파싱
    return res.json();
  })
  .then(data => {
    // json 출력
    console.log(data)
  })
  .catch(err => {
    // error 처리
    console.log('Fetch Error', err);
  });

 

위 코드를 콘솔에서 실행시키면 다음과 같습니다. Response 객체의 ok, status 프로퍼티를 이용하여 응답 상태에 따라 처리를 달리할 수도 있습니다.

 

 

 

POST

POST 방식으로 API를 호출하기 위해서는 추가 옵션을 주어야합니다. 몇 가지 옵션을 추가하여 테스트해보겠습니다.

 

fetch('https://jsonplaceholder.typicode.com/todos/', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    userId: 1,
    id: 101,
    title: 'test content',
    completed: false,
    }),
  })
  .then((res) => {
    return res.json();
  })
  .then((data) => {
    console.log(data);
  });

 

위 코드를 실행시키면 다음과 같습니다. 

 

 

위 코드는 테스트 사이트에서 제공해주는 예시에 따라 작성했기 때문에 문제없이 잘 요청이 완료되었습니다. 하지만 실제로 POST 방식으로 API를 호출하는 경우에는 API 명세를 꼼꼼하게 살펴보고 해당 API를 개발한 개발자에게 잘 모르는 부분은 물어봐야 합니다. 보내줄 데이터의 형식, 키 등이 맞지 않으면 에러가 나기 때문입니다.

 

 

이 외에 더 자세한 내용들은 다음 페이지들을 참고하면 좋을 것 같습니다.

˙ https://yeri-kim.github.io/posts/fetch/

˙ https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

˙ https://ko.javascript.info/fetch