fetch()
方法在
WindowOrWorkerGlobalScope
mixin starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.
The promise resolves to the
响应
object representing the response to your request. The promise
does not
reject on HTTP errors — it only rejects on network errors. You must use
then
handlers to check for HTTP errors.
WindowOrWorkerGlobalScope
is implemented by both
Window
and
WorkerGlobalScope
，意味着
fetch()
method is available in pretty much any context in which you might want to fetch resources.
A
fetch()
promise only rejects when a network error is encountered (which is usually when there’s a permissions issue or similar). A
fetch()
promise
does not
reject on HTTP errors (
404
, etc.). Instead, a
then()
handler must check the
Response.ok
and/or
Response.status
特性。
fetch()
method is controlled by the
connect-src
directive of
Content Security Policy
rather than the directive of the resources it's retrieving.
注意
：
fetch()
method's parameters are identical to those of the
Request()
构造函数。
const fetchResponsePromise = fetch(resource [, init])
resource
init
可选
An object containing any custom settings that you want to apply to the request. The possible options are:
method
GET
,
POST
。注意，
Origin
header is not set on Fetch requests with a method of
HEAD
or
GET
.
headers
头
object or an object literal with
ByteString
values. Note that
some names are forbidden
.
body
Blob
,
BufferSource
,
FormData
,
URLSearchParams
,
USVString
，或
ReadableStream
object. Note that a request using the
GET
or
HEAD
method cannot have a body.
mode
cors
,
no-cors
，或
same-origin
.
credentials
omit
,
same-origin
，或
包括
. To automatically send cookies for the current domain, this option must be provided. Starting with Chrome 50, this property also takes a
FederatedCredential
实例或
PasswordCredential
实例。
cache
redirect
follow
(automatically follow redirects),
error
(abort with an error if a redirect occurs), or
manual
(handle redirects manually). In Chrome the default is
follow
(before Chrome 47 it defaulted to
manual
).
referrer
USVString
specifying the referrer of the request. This can be a same-origin URL,
about:client
, or an empty string.
referrerPolicy
no-referrer
,
no-referrer-when-downgrade
,
same-origin
,
origin
,
strict-origin
,
origin-when-cross-origin
,
strict-origin-when-cross-origin
，或
unsafe-url
.
integrity
sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=
).
keepalive
keepalive
option can be used to allow the request to outlive the page. Fetch with the
keepalive
flag is a replacement for the
Navigator.sendBeacon()
API。
signal
AbortSignal
object instance; allows you to communicate with a fetch request and abort it if desired via an
AbortController
.
AbortError
AbortController
方法
abort()
方法。
TypeError
Authorization
头。
In our
Fetch Request example
(见
Fetch Request live
) we create a new
Request
object using the relevant constructor, then fetch it using a
fetch()
call. Since we are fetching an image, we run
Body.blob()
on the response to give it the proper MIME type so it will be handled properly, then create an Object URL of it and display it in an
<img>
元素。
const myImage = document.querySelector('img');
let myRequest = new Request('flowers.jpg');
fetch(myRequest)
.then(function(response) {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.blob();
})
.then(function(response) {
let objectURL = URL.createObjectURL(response);
myImage.src = objectURL;
});
在
Fetch with init then Request example
(见
Fetch Request init live
), we do the same thing except that we pass in an
init
object when we invoke
fetch()
:
const myImage = document.querySelector('img');
let myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');
const myInit = {
method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default'
};
let myRequest = new Request('flowers.jpg');
fetch(myRequest, myInit).then(function(response) {
// ...
});
You could also pass the
init
object in with the
Request
constructor to get the same effect:
let myRequest = new Request('flowers.jpg', myInit);
You can also use an object literal as
headers
in
init
.
const myInit = {
method: 'GET',
headers: {
'Content-Type': 'image/jpeg'
},
mode: 'cors',
cache: 'default'
};
let myRequest = new Request('flowers.jpg', myInit);
| 规范 | 状态 | 注释 |
|---|---|---|
|
Fetch
The definition of 'fetch()' in that specification. |
实时标准 |
Defined in a
WindowOrWorkerGlobalScope
partial in the newest spec.
|
|
Fetch
The definition of 'fetch()' in that specification. |
实时标准 | 初始定义 |
| Credential Management Level 1 | 工作草案 |
添加
FederatedCredential
or
PasswordCredential
instance as a possible value for
init.credentials
.
|
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 |
完整支持
不支持
兼容性未知
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。
WindowOrWorkerGlobalScope