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

기본 개념과 사용 방법

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

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

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

 fetch()를 불러들이는 경우, 취득할 리소스를 반드시 인수로 지정하지 않으면 안됩니다. 읽어들인 뒤,  fetch()는 Promise객체를 반환합니다. 리퀘스트가 성공하던 실패하던 해당 리퀘스트 통신에 대한 Response객체가 취득됩니다. fetch()의 두번째 인수는 초기화에 사용되는 객체를 정의하고 있습니다. 이 인수는 기입하지 않아도 함수의 동작에 문제가 없습니다. 이 인수에 대한 상세한 정보는 Request)를 참고해주시기 바랍니다.

fetch함수로 Response 작업이 수행된 후, 콜백함수의 매개변수로 담긴 response 객체에는 리스폰스에 포함되어있는 컨텐츠와 그에대한 처리방법이 담긴 메소드들이 담겨있습니다. 자세한 사항은 Body를 참고해주시기 바랍니다.

Request()Response()를 사용하는 것으로, Request와 Response를 직접 작성할 수 있습니다. 하지만 이러한 추가 옵션들은   FetchEvent.respondWith와 같은 또다른 API를 불러 들이는 작업이 수행되어야 하므로 필요하지 않다면 굳이 작성하지 않는 편이 좋습니다.

참고: Fetch API에 대한 자세한 이용방법은 Using Fetch를 참고해주시기 바랍니다. 또한  Fetch basic concepts에서는 Fetch API의 기본개념 또한 설명되어 있습니다.

Aborting a fetch

몇몇 브라우저들은 AbortControllerAbortSignal 인터페이스에 대한 실험적인 기능을 추가로 지원하였습니다. 이러한 기능은 Fetch API와 XHR API에 적용할 수 있도록 하고있으나 아직 완벽하게 구현되지 않았습니다. 자세한 사항은 인터페이스 문서를 참고해주시기 바랍니다.

Fetch 인터페이스

GlobalFetch
리소스를 취득하기 위해 사용되는  fetch() 메서드가 정의되어 있습니다.
Headers
리퀘스트와 리스폰스 객체에 대한 헤더입니다. 헤더정보에 보내는 쿼리나 통신 결과의 행동에 대한 선택이 가능합니다.
Request
리소스에 대한 리퀘스트의 객체입니다.
Response
리퀘스트에 대한 리스폰스 객체입니다.

Fetch 믹스인

Body
Response와 Request 본체에 관련한 메소드들이 정의되어 있습니다. 이것들을 이용함으로써 response 결과물을 html, json과 같이 컨텐츠 타입별로 처리하는것이 가능합니다. 

명세

Specification Status Comment
Fetch Living Standard Initial definition

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

기능 Chrome Edge Firefox (Gecko) IE Opera Safari (WebKit)
기본기능 42 14 39 (39)
34[1]
52 (52)[2]
No support 29
28[1]
10.1
ReadableStream response body 43 14 No support[3] No support ? No support
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 42 42 (Yes) (Yes) No support No support 10.1
ReadableStream response body 43 43 (Yes) No support[3] No support ? No support

[1] This API is implemented behind a preference.

[2] Prior to Firefox 52, get() only returned the first value in the specified header, with getAll() returning all values. From 52 onwards, get() now returns all values and getAll() has been removed.

[3] Readable streams are currently enabled in Firefox, but hidden behind the dom.streams.enabled and javascript.options.streams prefs.

관련정보

문서 태그 및 공헌자

 이 페이지의 공헌자: gw1021, BANIP
 최종 변경: gw1021,