MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Fetch API提供了一个获取资源的接口(包括跨网络)。任何使用过 XMLHttpRequest 的人都会熟悉它,但是新的API提供了更强大和更灵活的功能集。

Note:  如果不需要支持落后的IE系列浏览器,就可以放心大胆的使用吧!

ps: 当然也可以使用第三方的polyfill 库!https://github.com/github/fetch

概念和用法

Fetch 提供了对 RequestResponse (以及其他与网络请求有关的)对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是service workers、Cache API、又或者是其他处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。

它还提供了一种定义,将 CORS 和 HTTP 原生的头信息结合起来,取代了原来那种分离的定义。

发送请求或者获取资源,需要使用 GlobalFetch.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 接口

GlobalFetch
包含了 fetch() 方法,用于获取资源。
Headers
相当于 response/request 的头信息,可以修改它,或者针对不同的结果做不同的操作。
Request
相当于一个资源请求。
Response
相当于请求的响应

Fetch mixin

Body
提供了关联 response/request 中 body 的方法,可以定义它的文档类型以及请求如何被处理。

规范

规范 状态 说明
Fetch Living Standard Initial definition

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 42.0
 
39 (39)
34 behind pref
未实现

29
28 behind pref

未实现
Streaming response body 43.0

?

?

?

?

Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 42.0 未实现 未实现 未实现 未实现 未实现 42.0
Streaming respone body 未实现 43.0

?

?

?

?

?

43.0

相关链接

文档标签和贡献者

标签: 
 此页面的贡献者: NowhereToRun, xgqfrms-GitHub, yqjiang, xcatliu
 最后编辑者: NowhereToRun,