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

RESTful API는 웹 애플리케이션의 데이터를 서버로부터 가져오거나 업데이트하기 위한 표준 방법입니다. 자바스크립트에는 이러한 RESTful API를 호출하는 데 사용할 수 있는 fetch API가 있습니다. fetch API는 일반적으로 AJAX 요청을 수행하고 응답을 처리하는 데 사용됩니다.

fetch API 기본 사용법

fetch API는 비동기로 작동하며 HTTP 요청을 보내고 응답을 가져오기 위해 fetch 함수를 사용합니다. 기본적인 fetch API의 사용법은 다음과 같습니다:

fetch(url)
  .then(response => response.json())
  .then(data => {
    // 처리할 작업
  })
  .catch(error => {
    // 오류 처리
  });

위의 코드는 fetch 함수를 사용하여 주어진 url로 GET 요청을 보내고 서버의 응답을 JSON 형태로 파싱합니다. 그런 다음 파싱된 데이터를 처리하는 작업을 수행합니다. 만약 오류가 발생하면 catch 블록에서 오류를 처리합니다.

RESTful API 호출 예제

이제 실제로 자바스크립트의 fetch API를 사용하여 RESTful API를 호출하는 예제를 살펴보겠습니다. 아래 예제는 서버에서 사용자 목록을 가져오기 위해 GET 요청을 수행하는 예제입니다:

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => {
    // 사용자 목록을 처리하는 작업
    console.log(data);
  })
  .catch(error => {
    // 오류 처리
    console.error(error);
  });

위의 코드에서는 fetch 함수를 사용하여 'https://api.example.com/users'로 GET 요청을 보내고 서버의 응답을 JSON 형태로 파싱합니다. 그런 다음 파싱된 데이터는 console.log를 사용하여 출력됩니다. 오류가 발생하면 console.error를 사용하여 오류를 출력합니다.

이제 여러분은 자바스크립트 fetch API를 사용하여 RESTful API를 호출하는 방법을 배웠습니다. 이를 통해 웹 애플리케이션에서 서버의 데이터를 가져오고 업데이트하는 작업을 간단하고 효율적으로 처리할 수 있습니다.