Fetch API 提供了一个获取资源的接口(包括跨域请求)。任何使用过 XMLHttpRequest 的人都能轻松上手,而且新的 API 提供了更强大和灵活的功能集。
概念和用法
Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是
service worker、Cache API、又或者是其他处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。
它同时还为有关联性的概念,例如CORS和HTTP原生头信息,提供一种新的定义,取代它们原来那种分离的定义。
发送请求或者获取资源,需要使用 WindowOrWorkerGlobalScope.fetch() 方法。它在很多接口中都被实现了,更具体地说,是在 Window 和 WorkerGlobalScope 接口上。因此在几乎所有环境中都可以用这个方法获取到资源。
fetch() 必须接受一个参数——资源的路径。无论请求成功与否,它都返回一个 Promise 对象,resolve 对应请求的 Response。你也可以传一个可选的第二个参数 init(参见 Request)。
一旦 Response 被返回,就可以使用一些方法来定义内容的形式,以及应当如何处理内容(参见 Body)。
你也可以通过 Request() 和 Response() 的构造函数直接创建请求和响应,但是我们不建议这么做。他们应该被用于创建其他
API 的结果(比如,service workers 中的 FetchEvent.respondWith)。
注意:更多关于 Fetch API 的用法,参考 Using Fetch,以及一些概念 Fetch basic concepts。
中止 fetch
浏览器已经开始为 AbortController 和 AbortSignal 接口(也就是Abort API)添加实验性支持,允许像
Fetch 和 XHR 这样的操作在还未完成时被中止 。请参阅接口页面了解更多详情。
Fetch 接口
WindowOrWorkerGlobalScope.fetch()- 包含了
fetch()方法,用于获取资源。 Headers- 相当于 response/request 的头信息,可以使你查询到这些头信息,或者针对不同的结果做不同的操作。
Request- 相当于一个资源请求。
Response- 相当于请求的响应
Fetch mixin
Body- 提供了与 response/request 中的 body 有关的方法,可以定义它的内容形式以及处理方式。
规范
| 规范 | 状态 | 说明 |
|---|---|---|
| Fetch | Living Standard | Initial definition |
浏览器兼容
| 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 |
Full support 42 | Full support 14 | Full support 39 | No support No | Full support 29 | Full support 10.1 | Full support 42 | Full support 42 | Full support 39 | Full support 29 | Full support 10.3 | Full support 4.0 |
| Support for blob: and data: | Full support 48 | Full support 79 | ? | No support No | ? | ? | Full support 43 | Full support 48 | ? | ? | ? | Full support 5.0 |
| referrerPolicy | Full support 52 | Full support 79 | Full support 52 | No support No | Full support 39 | Full support 11.1 | Full support 52 | Full support 52 | Full support 52 | Full support 41 | No support No | Full support 6.0 |
| signal | Full support 66 | Full support 16 | Full support 57 | No support No | Full support 53 | Full support 11.1 | Full support 66 | Full support 66 | Full support 57 | Full support 47 | Full support 11.3 | Full support 9.0 |
| Streaming response body | Full support 43 | Full support 14 | Full support Yes | No support No | Full support 29 | Full support 10.1 | Full support 43 | Full support 43 | No support No | No support No | Full support 10.3 | Full support 4.0 |
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.