자바스크립트 fetch 함수: 서버와 데이터 통신을 위한 새로운 방법

서버와 데이터를 통신할 때 자바스크립트 개발자들은 일반적으로 XMLHttpRequest(XHR)를 사용합니다. 하지만 이제는 XHR보다 더 간단하고 직관적인 방법인 fetch 함수가 등장했습니다. 이번에는 fetch 함수에 대해 알아보겠습니다.

fetch 함수란?

fetch 함수는 네트워크 요청을 보내고 응답을 받아올 수 있는 기능을 제공하는 자바스크립트 내장 함수입니다. fetch 함수는 AJAX 요청을 간편하게 할 수 있도록 해주며, Promise 객체를 반환하기 때문에 비동기 코드를 작성하는 데에 효과적입니다.

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

이 코드는 `url`로 데이터를 가져와서 JSON 형식으로 Parsing하며, 그 결과를 출력하는 코드입니다. `then` 메소드와 `catch` 메소드를 이용해 Promise 기반의 코드를 작성했기 때문에 응답이 오기 전 코드의 실행이 끝나 버릴 걱정은 없습니다.

fetch 함수의 옵션

fetch 함수에는 다양한 옵션을 설정할 수 있습니다. 그 중에서도 가장 기본적인 옵션은 `method`와 `headers`입니다.

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

`method` 옵션을 이용해 HTTP 메소드를 선택하고, `headers` 옵션을 이용해 HTTP 헤더를 설정합니다. 또한, `body` 옵션을 이용해 Request body에 데이터를 추가할 수 있습니다.

요약

fetch 함수는 자바스크립트 내장 함수로 네트워크 요청을 보내고 응답을 받아올 수 있는 기능을 제공합니다. 이를 이용하면 간결하게 AJAX 요청을 작성할 수 있으며, Promise 객체를 반환하기 때문에 비동기 코드 작성에도 용이합니다. fetch 함수의 옵션은 HTTP 메소드, HTTP 헤더, Request body 등으로 구성됩니다.

키워드: 자바스크립트 fetch 함수, AJAX 요청, Promise 객체, HTTP 메소드, HTTP 헤더, Request body