We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Fetch API 提供了一個能獲取包含跨網路資源在的資源介面。它有點像我們所熟悉的 XMLHttpRequest ,但這個新的 API 提供了更強更彈性的功能。

概念與應用

Fetch 提供了 RequestResponse 物件,還有其他牽涉網路請求的通用定義。這能讓他們在需要的時候被使用到,不管是 service worker、Cache API、還是其他處理或更動請求回應的相類事物、或是任何需要產生有序化產生回應的用例(use case)。

它也提供了諸如 CORS 與 HTTP origin 標頭語意的分散定義,能取代分散的定義。

要發動請求並取得資源的話,請使用 GlobalFetch.fetch 方法。他實作了數種介面,並指定了 WindowWorkerGlobalScope,使它可以在任何想獲取資源的環境中使用。

fetch() 方法有一個強制性的參數,就是要取得資源的網址。該方法會回傳一個不論請求成敗,都會 resolve 的 promise 回應。你也能選擇性地使用第二個稱為 init 的物件參數(請參見 Request)。

Response 檢索後,在請求體裡面會定義一些請求體為何,還有要如何處理的方法(請參見 Body)。

你也可以直接用 Request()Response() 建構子來建立請求與回應,不過你不太可能直接使用他,反而更可能是以其他 API 行動的結果為形式存在。(例如來自 service worker 的 FetchEvent.respondWith

注意:你可以在使用 Fetch深入理解 Fetch,並在Fetch 的基本概念文章內理解概念。

Fetch 介面

GlobalFetch
包含用於取得資源的 fetch() 方法。
Headers
代表請求/回應標頭,讓你能 query 並針對結果不同,採取不同行動。
Request
代表資源請求。
Response
代表資源請求的回應。

實驗性 fetch controller/signal/observer 介面

也稱為「可取消的 fetch」(cancellable fetch),介面包含允許 fetch 請求在生命週期間觀察和控制所操作的功能。

FetchController
允許控制一個或以上 fetch 請求的控制器物件。
FetchSignal
能以 fetch 請求透過 FetchController 交流與控制的單一物件。
FetchObserver
檢索 fetch 請求狀態相關的訊息觀察物件(observer object)。
ObserverCallback
提供回呼函式,該函式在 fetch 請求與運行相關聯時運行。另外也提供 FetchObserver 物件,用於檢索 fetch 請求狀態的相關訊息。

Fetch mixin

Body
提供請求/回應訊息體的相關方法,能宣告內容的類別為何,以及該如何處理。

規範

規範 狀態 註解
Fetch Living Standard 初始定義

瀏覽器相容性

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 回應體 43 14 No support[3] No support ? No support
功能 Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本支援 42 42 (Yes) (Yes) No support No support 10.1
ReadableStream 回應體 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.

參見

文件標籤與貢獻者

此頁面的貢獻者: iigmir, guAnsunyata, jackblackevo
最近更新: iigmir,