자바스크립트 fetch API란 무엇인가?

10 Sep 2023

javascript

자바스크립트를 사용하여 웹 애플리케이션을 개발할 때, 서버와의 데이터 통신은 매우 중요합니다. 이전에는 AJAX(XMLHttpRequest)를 주로 사용해왔지만, 최근에는 Fetch API가 등장하여 더욱 편리하고 간결한 데이터 요청과 응답을 제공합니다.

Fetch API는 HTTP 요청을 보내고 응답을 처리하는 기능을 제공하는 자바스크립트 인터페이스입니다. 이는 네트워크 요청을 비동기적으로 처리하기 위해 사용되며, Promise 기반의 구조를 가지고 있습니다.

이제 Fetch API의 기본적인 사용법을 알아보겠습니다:

1. 기본적인 Fetch API 사용법

Fetch API를 사용하여 서버에 HTTP 요청을 보내고 응답을 처리하는 방법은 아래와 같습니다:

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

위의 예제에서는 fetch 함수를 사용하여 https://api.example.com/data에 GET 요청을 보냅니다. 그리고 response.json()을 호출하여 응답 데이터를 JSON 형식으로 파싱합니다. 이후에는 받아온 데이터를 콘솔에 출력하는 단순한 예시입니다.

2. Request 객체 생성하기

만약 HTTP 요청을 커스터마이징하고 싶다면, Request 객체를 사용하여 요청을 생성할 수 있습니다. 예를 들어 아래와 같이 HTTP 메소드, 헤더, 바디를 설정할 수 있습니다:

const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'example', password: 'password' })
};

const request = new Request('https://api.example.com/login', options);

fetch(request)
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

위의 예제에서는 POST 요청을 보내기 위해 method을 ‘POST’로 설정하였으며, headers를 사용하여 JSON 형식의 Content-Type을 설정합니다. body 속성을 사용하여 요청 바디 데이터를 전송합니다.

3. 응답 처리하기

Fetch API의 fetch() 함수는 Promise를 리턴하므로, 응답을 처리하기 위해 .then()과 .catch() 메소드를 사용합니다. 응답 데이터를 리턴하기 위해 .json() 메소드를 호출할 수 있습니다.

그 외에도 헤더 정보를 확인하고자 하는 경우 .headers 속성을 사용하고, 응답의 상태코드를 확인하고자 하는 경우 response.status를 사용할 수 있습니다.

4. Polyfill 사용하기

Fetch API는 자바스크립트의 최신 표준 기능 중 하나이기 때문에, 오래된 브라우저에서는 지원되지 않을 수 있습니다. 이런 경우에는 Fetch API를 사용할 수 있도록 도와주는 polyfill을 사용할 수 있습니다. 가장 많이 사용되는 Fetch API polyfill 중 하나는 whatwg-fetch입니다.

아래와 같이 whatwg-fetch을 사용하여 polyfill을 추가할 수 있습니다:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.5.0/fetch.min.js"></script>

결론

자바스크립트 Fetch API는 표준 인터페이스로, HTTP 요청을 보내고 응답을 처리하는 간편하고 강력한 방법을 제공합니다. 이를 통해 웹 애플리케이션에서 서버와의 데이터 통신을 쉽게 구현할 수 있습니다. Fetch API는 Promise 기반이기 때문에 비동기적인 처리가 가능하며, 요청과 응답을 커스터마이징하기 위한 다양한 기능들을 제공합니다.