자바스크립트 Fetch API를 활용한 데이터 가져오기

자바스크립트 Fetch API를 사용하면 서버로부터 데이터를 가져와 웹 페이지에서 사용할 수 있다. 이 API는 브라우저에서 제공되는 기본 기능이며, 이전의 XMLHttpRequest보다 간단하고 직관적인 API를 제공한다. 이 글에서는 Fetch API를 사용하여 데이터를 가져오는 방법에 대해 알아보자.

Fetch 함수

Fetch 함수는 URL, 요청 옵션 객체를 매개변수로 받아서 Promise 객체를 반환한다. Promise 객체를 사용하여 비동기적으로 데이터를 가져올 수 있다. 다음은 기본적인 Fetch 함수의 사용 예제이다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

위의 코드에서는 API 엔드포인트에 GET 요청을 보내고, response 객체를 Promise 객체로 반환한다. json 메소드는 Promise 객체를 json 형태로 변환하며, 다음으로 Promise 객체를 반환하여 콘솔에 데이터를 출력한다. 오류가 발생하면 catch 문에서 처리한다.

요청 설정

Fetch 함수는 두 번째 매개변수로 옵션 객체를 받는데, 이 객체를 사용하여 요청을 설정할 수 있다. 예를 들어, 다음과 같이 요청 메소드를 POST로 설정하고, 요청 헤더와 바디를 설정할 수 있다.

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

위의 코드에서는 API 엔드포인트에 POST 요청을 보내고, 요청 헤더를 설정하고, JSON 형식으로 바디를 전송한다. 이 외에도 다양한 요청 설정을 할 수 있으며, 자세한 내용은 MDN 문서를 참고하면 된다.

결론

이번 글에서는 Fetch API를 사용하여 데이터를 가져오는 방법에 대해 알아보았다. Fetch 함수를 사용하여 API 요청을 보내고, 비동기적으로 데이터를 처리할 수 있다. 요청 설정을 사용하여 요청 메소드, 헤더, 바디 등을 설정할 수 있으며, 자세한 내용은 MDN 문서에서 확인할 수 있다.

키워드: 자바스크립트 Fetch API, 데이터 가져오기, 비동기 처리, 요청 설정