Fetch API 提供了一個能獲取包含跨網路資源在的資源介面。它有點像我們所熟悉的
XMLHttpRequest
,但這個新的 API 提供了更強更彈性的功能。概念與應用
Fetch 提供了 Request
與 Response
物件,還有其他牽涉網路請求的通用定義。這能讓他們在需要的時候被使用到,不管是 service worker、Cache API、還是其他處理或更動請求回應的相類事物、或是任何需要產生有序化產生回應的用例(use case)。
它也提供了諸如 CORS 與 HTTP origin 標頭語意的分散定義,能取代分散的定義。
要發動請求並取得資源的話,請使用 GlobalFetch.fetch
方法。他實作了數種介面,並指定了 Window
與 WorkerGlobalScope
,使它可以在任何想獲取資源的環境中使用。
fetch()
方法有一個強制性的參數,就是要取得資源的網址。該方法會回傳一個不論請求成敗,都會 resolve 的 promise 回應
。你也能選擇性地使用第二個稱為 init
的物件參數(請參見 Request
)。
當 Response
檢索後,在請求體裡面會定義一些請求體為何,還有要如何處理的方法(請參見 Body
)。
你也可以直接用 Request()
與 Response()
建構子來建立請求與回應,不過你不太可能直接使用他,反而更可能是以其他 API 行動的結果為形式存在。(例如來自 service worker 的 FetchEvent.respondWith
)
注意:你可以在使用 Fetch深入理解 Fetch,並在Fetch 的基本概念文章內理解概念。
中斷一次 Fetch
各家瀏覽器已經開始加入 AbortController
與 AbortSignal
介面(也就是 Abort API)的實驗性支援,讓 Fetch 和 XHR 這類的操作在完成前可以被中斷。詳情請參閱相關介面的文件。
Fetch 介面
WindowOrWorkerGlobalScope.fetch()
- 用於取得資源的
fetch()
方法。 Headers
- 代表請求/回應標頭,讓你能 query 並針對結果不同,採取不同行動。
Request
- 代表資源請求。
Response
- 代表資源請求的回應。
Fetch mixin
Body
- 提供請求/回應訊息體的相關方法,能宣告內容的類別為何,以及該如何處理。
規範
規範 | 狀態 | 註解 |
---|---|---|
Fetch | Living Standard | 初始定義 |
瀏覽器相容性
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fetch | Chrome Full support 42 | Edge Full support 14 | Firefox
Full support
39
| IE No support No | Opera
Full support
29
| Safari Full support 10.1 | WebView Android Full support 42 | Chrome Android Full support 42 | Firefox Android
Full support
39
| Opera Android
Full support
29
| Safari iOS Full support 10.3 | Samsung Internet Android ? |
Support for blob: and data: | Chrome Full support 48 | Edge No support No | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android Full support 43 | Chrome Android Full support 48 | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
referrerPolicy | Chrome Full support 52 | Edge No support No | Firefox Full support 52 | IE No support No | Opera Full support 39 | Safari Full support 11.1 | WebView Android Full support 52 | Chrome Android Full support 52 | Firefox Android Full support 52 | Opera Android Full support 41 | Safari iOS No support No | Samsung Internet Android ? |
signal | Chrome Full support 66 | Edge Full support 16 | Firefox Full support 57 | IE No support No | Opera Full support 53 | Safari Full support 11.1 | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support 57 | Opera Android Full support 47 | Safari iOS Full support 11.3 | Samsung Internet Android No support No |
Streaming response body | Chrome Full support 43 | Edge Full support 14 | Firefox
Full support
Yes
| IE No support No | Opera Full support 29 | Safari Full support 10.1 | WebView Android Full support 43 | Chrome Android Full support 43 | Firefox Android No support No | Opera Android No support No | Safari iOS Full support 10.3 | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.