fetch 란?

Javascript에서 제공하며 서버로 네트워크 요청을 보내고 응답할 수 있도록 도와주는 함수 (API를 사용하여 서버와 비동기 통신을 하기 위한 함수)

fetch 사용법

fetch('url', { options })
	.then((response) => console.log('response:', response))
  .catch((error) => console.log('error:', error));

fetch() 함수는 첫 번째 인자로 url, 두 번째 인자로는 {옵션 객체}를 받고 Promise 타입의 객체를 반환한다. 반환된 객체는 API 호출이 성공했을 경우 응답 객체(response)를 resolve 하고, 실패했을 경우에는 예외 객체(error)를 reject 한다.

resolve는 기능을 정상적으로 이행하여 데이터를 전달하는 것으로 .then() 을 통해 결과를 받는다. reject는 기능을 정상적으로 이행하지 못하여 중간에 오류가 생기면 호출되며 .catch() 로 결과를 받는다.

옵션(options) 객체에서는 HTTP 방식(method), HTTP 요청 헤더(headers), HTTP 요청 전문(body) 등을 설정해줄 수 있다. 응답 객체(response)에서는 HTTP 응답 상태(status), HTTP 응답 헤어(headers), HTTP 응답 전문(body)를 받아올 수 있다.

GET

원격 API에 있는 데이터를 가져올 때 쓰이는 방식으로 fetch() 함수의 디폴트로 설정되어 있다.

GET 방식은 요청 전문을 받지 않기 때문에 옵션 인자가 필요하지 않다.

fetch('URL')
	.then((response) => console.log(response)
);

대부분의 REST API는 JSON 형태의 데이터를 응답하기 때문에, 응답 객체(response)는 .json() 메서드를 통해 JSON 형태의 응답 전문을 자바스크립트 객체로 변환할 수 있다.

fetch('URL')
  .then((response) => response.json())
  .then((data) => console.log(data));