자바스크립트 fetch API를 사용한 RESTful API 호출

10 Sep 2023

javascript

RESTful API는 웹 애플리케이션과 서버 간에 데이터를 주고받기 위한 표준 방법입니다. 자바스크립트 fetch API는 이러한 RESTful API 호출을 간편하게 처리할 수 있는 강력한 도구입니다. 이 블로그 포스트에서는 fetch API를 사용하여 자바스크립트에서 RESTful API 호출을 어떻게 수행하는지 알아보겠습니다.

fetch API란

fetch API는 웹 브라우저에서 네트워크 요청을 보내기 위한 인터페이스입니다. 이 API는 Promise를 기반으로 동작하며, 간단하고 일관된 방법으로 데이터를 가져올 수 있습니다. fetch API는 기본적으로 XMLHttpRequest 객체를 대체하는 새로운 표준입니다.

RESTful API 호출하기

RESTful API 호출은 주어진 엔드포인트로 HTTP 요청을 보내고, 해당하는 응답을 받는 과정입니다. fetch API를 사용하여 RESTful API 호출을 수행하는 방법은 다음과 같습니다.

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 데이터 처리
  })
  .catch(error => {
    // 에러 처리
  });

위 예시 코드는 fetch 함수를 사용하여 주어진 URL에 GET 요청을 보내는 것을 보여줍니다. 그런 다음 응답을 JSON 형식으로 변환하고 데이터를 처리하는 함수를 체인으로 연결합니다. 에러가 발생한 경우에는 catch 함수에서 에러를 처리합니다.

POST 요청 보내기

HTTP POST 요청을 보내기 위해서는 다음과 같이 fetch API를 사용할 수 있습니다.

const data = {
  name: 'John',
  age: 30
};

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => {
    // 응답 처리
  })
  .catch(error => {
    // 에러 처리
  });

위 코드에서는 fetch 함수의 두 번째 매개변수로 객체를 전달하여 HTTP 메서드를 POST로 설정하고, 요청 헤더에 ‘Content-Type’을 application/json으로 설정합니다. 그리고 요청 본문에는 JSON.stringify를 사용하여 데이터 객체를 문자열로 변환한 후 전달합니다.

PUT 요청 보내기

HTTP PUT 요청을 보내기 위해서는 다음과 같은 방법을 사용할 수 있습니다.

const data = {
  id: 123,
  name: 'John',
  age: 30
};

fetch(url, {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => {
    // 응답 처리
  })
  .catch(error => {
    // 에러 처리
  });

PUT 요청은 POST 요청과 유사하게 작성되지만, 다른 HTTP 메서드인 PUT을 사용합니다.

DELETE 요청 보내기

HTTP DELETE 요청을 보내는 방법은 다음과 같습니다.

fetch(url, {
  method: 'DELETE'
})
  .then(response => {
    if (!response.ok) {
      throw new Error('요청이 실패하였습니다.');
    }
    // 응답 처리
  })
  .catch(error => {
    // 에러 처리
  });

DELETE 요청은 별도의 요청 본문이 필요하지 않기 때문에, 별도의 데이터 객체를 전달할 필요가 없습니다. 요청이 성공하면 응답 코드가 2xx 범위 내에 있습니다.

요약

fetch API를 사용하면 자바스크립트로 손쉽게 RESTful API 호출을 수행할 수 있습니다. GET, POST, PUT, DELETE 등 다양한 HTTP 메서드를 사용하여 데이터를 주고받을 수 있습니다. fetch API는 Promise 기반으로 동작하기 때문에 비동기 상황을 처리하기에 용이하며, 다양한 응답 상태를 처리할 수 있습니다.

이외에도 fetch API에는 요청 헤더 설정, 인증 처리, 파일 업로드 등 더 많은 기능이 있습니다. 자세한 내용은 MDN 문서를 참조하시기 바랍니다.