[javascript] fetch API

Fetch API

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있습니다. XMLHttpRequest와 같은 비슷한 API가 존재합니다만, 새로운 Fetch API는 좀더 강력하고 유연한 조작이 가능합니다.

기본 개념과 사용 방법

Fetch에는 일반적인 오브젝트로로 Request 와 Response (en-US)가 포함되어 있습니다. 이것들은 service worker이나 Cache API같이 Response와 Request객체를 다루는 API나 독자적으로 리스폰스를 발생시키는 경우에도 사용 가능합니다.

또한 CORS나 HTTP 오리진 헤더의 행동에 관련한 개념에 대해서도 정의되어 있습니다. 이 정의는 여러곳에 분산되어있는 갖가지 행동에대한 정의들을 한곳에 고쳐 쓴 것입니다.

Fetch API로 리소스를 취득하기 위해서 GlobalFetch.fetch (en-US) 메소드를 불러들여야 합니다. 이 메소드는 Window나 WorkerGlobalScope (en-US)와 같은 인터페이스로부터 구현되었습니다.

 

fetch 명세는 jQuery.ajax()와 크게 두 가지에서 다릅니다.

• fetch()가 반환하는 프로미스 객체는 404, 500과 같은 HTTP 오류 상태를 수신해도 거부되지 않습니다. fetch()의 프로미스는 서버에서 헤더를 포함한 응답을 받는 순간 정상적으로 이행합니다. 대신, 응답의 상태가 200-299를 벗어날 경우 ok (en-US) 속성이 false로 설정됩니다. 프로미스가 거부되는 경우는 네트워크 연결이 실패하는 경우를 포함, 아예 요청을 완료하지 못한 경우로 한정됩니다.
• 자격 증명(credentials) 옵션 (en-US)을 제공하지 않은 경우, fetch()는 교차 출처 쿠키를 전송하지 않습니다. (2018년 4월 이후, 자격 증명 정책의 기본 값이 same-origin으로 변경됐습니다.)

 

기본적인 Fetch 요청은 매우 쉽게 만들 수 있습니다. 아래 코드를 살펴보세요.

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

 

 

참고 

 - https://developer.mozilla.org/ko/docs/Web/API/Fetch_API

Fetch API - Web API | MDN

 - https://fetch.spec.whatwg.org/#fetch-method

Fetch Standard