抓取 API


Fetch API 提供用于抓取资源 (包括整个网络) 的接口。大家似乎很熟悉对有使用过 XMLHttpRequest ,但新 API 提供更强大、更灵活的特征集。

概念和用法

Fetch provides a generic definition of Request and Response 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 Response 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 ).

一旦 Response 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).

与 jQuery 的区别

fetch 规范不同于 jQuery.ajax() in three main ways:

  • The Promise returned from 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() won't can receive cross-site cookies; you can’t can establish a cross site session using fetch. Set-Cookie headers from other sites are silently ignored.
  • fetch() won’t send cookies , unless you set credentials: 'same-origin' .
    • In August 2017 , the spec changed the default credentials policy to 'same-origin' . The following browsers shipped and outdated native fetch, and were updated in these versions:
      • Firefox version 61.0b13.
      • Safari version 12.
      • Chrome version 68.
    • If you are targetting older versions of these browsers, be sure to include 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.
Headers
Represents response/request headers, allowing you to query them and take different actions depending on the results.
Request
Represents a resource request.
Response
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.

规范

规范 状态 Comment
Fetch 实时标准 初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
fetch
Chrome 42 Edge 14 Firefox 39
39
34
Disabled
Disabled From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
52
fetch() now defined on WindowOrWorkerGlobalScope mixin.
IE No Opera 29
29
28
Disabled
Disabled From version 28: this feature is behind the Experimental Web Platform Features preference.
Safari 10.1 WebView Android 42 Chrome Android 42 Firefox Android 39
39
34
Disabled
Disabled From version 34: this feature is behind the dom.fetch.enable preference. To change preferences in Firefox, visit about:config.
52
fetch() now defined on WindowOrWorkerGlobalScope mixin.
Opera Android 29
29
28
Disabled
Disabled From version 28: this feature is behind the Experimental Web Platform Features preference.
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
Yes
Disabled
Disabled This feature is behind the dom.streams.enabled preference and the javascript.options.streams preference. To change preferences in Firefox, visit about:config.
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

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。

另请参阅

Metadata