Fetch API 提供用于抓取资源 (包括整个网络) 的接口。大家似乎很熟悉对有使用过
XMLHttpRequest
，但新 API 提供更强大、更灵活的特征集。
Fetch provides a generic definition of
Request
and
响应
objects (and other things involved with network requests). This will allow them to be used wherever they are needed in the future, whether it’s for service workers, Cache API, and other similar things that handle or modify requests and responses, or any kind of use case that might require you to generate your responses programmatically (that is, the use of computer program or personal programming instructions).
It also defines related concepts such as CORS and the HTTP Origin header semantics, supplanting their separate definitions elsewhere.
For making a request and fetching a resource, use the
WindowOrWorkerGlobalScope.fetch()
method. It is implemented in multiple interfaces, specifically
Window
and
WorkerGlobalScope
. This makes it available in pretty much any context you might want to fetch resources in.
fetch()
method takes one mandatory argument, the path to the resource you want to fetch. It returns a
Promise
that resolves to the
响应
to that request, whether it is successful or not. You can also optionally pass in an
init
options object as the second argument (see
Request
).
一旦
响应
is retrieved, there are a number of methods available to define what the body content is and how it should be handled (see
Body
).
You can create a request and response directly using the
Request()
and
Response()
constructors, but it's uncommon to do this directly. Instead, these are more likely to be created as results of other API actions (for example,
FetchEvent.respondWith()
from service workers).
fetch
规范不同于
jQuery.ajax()
in three main ways:
fetch()
won’t reject on HTTP error status
even if the response is an HTTP
404
or
500
. Instead, it will resolve normally (with
ok
status set to
false
), and it will only reject on network failure or if anything prevented the request from completing.
fetch()
Set-Cookie
headers from other sites are silently ignored.
fetch()
won’t send cookies
, unless you set
credentials: 'same-origin'
.
'same-origin'
. The following browsers shipped and outdated native fetch, and were updated in these versions:
credentials: 'same-origin'
init option
on all api requests that may be affected by cookies/user login state.
注意 : Find out more about using the Fetch API features in Using Fetch , and study concepts in Fetch basic concepts .
Browsers have started to add experimental support for the
AbortController
and
AbortSignal
interfaces (aka The Abort API), which allow operations like Fetch and XHR to be aborted if they have not already completed. See the interface pages for more details.
WindowOrWorkerGlobalScope.fetch()
fetch()
method used to fetch a resource.
头
Represents response/request headers, allowing you to query them and take different actions depending on the results.
Request
Represents a resource request.
响应
Represents the response to a request.
Body
Provides methods relating to the body of the response/request, allowing you to declare what its content type is and how it should be handled.
| 规范 | 状态 | 注释 |
|---|---|---|
| Fetch | 实时标准 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
fetch
|
Chrome 42 | Edge 14 |
Firefox
39
|
IE No |
Opera
29
|
Safari 10.1 | WebView Android 42 | Chrome Android 42 |
Firefox Android
39
|
Opera Android
29
|
Safari iOS 10.3 | Samsung Internet Android 4.0 |
| Support for blob: and data: | Chrome 48 | Edge 79 | Firefox ? | IE No | Opera ? | Safari ? | WebView Android 43 | Chrome Android 48 | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android 5.0 |
| referrerPolicy | Chrome 52 | Edge 79 | Firefox 52 | IE No | Opera 39 | Safari 11.1 | WebView Android 52 | Chrome Android 52 | Firefox Android 52 | Opera Android 41 | Safari iOS No | Samsung Internet Android 6.0 |
| signal | Chrome 66 | Edge 16 | Firefox 57 | IE No | Opera 53 | Safari 11.1 | WebView Android 66 | Chrome Android 66 | Firefox Android 57 | Opera Android 47 | Safari iOS 11.3 | Samsung Internet Android 9.0 |
| Streaming response body | Chrome 43 | Edge 14 |
Firefox
Yes
Disabled
|
IE No | Opera 29 | Safari 10.1 | WebView Android 43 | Chrome Android 43 | Firefox Android No | Opera Android No | Safari iOS 10.3 | Samsung Internet Android 4.0 |
完整支持
不支持
兼容性未知
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。