最开始简书的书友写过一篇文章,里面探讨Fetch的解决方案《传统 Ajax 已死,Fetch 永生》
在笔者使用过程中发现了一些问题,这篇文章就是引用上面那篇文章做了一个补充
定义
首先看一下Fetch这个词在MDN中的描述:
The Fetch API provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest
, but the new API provides a more powerful and flexible feature set.
翻译:Fetch API 提供了获取资源(比如通过网络)的接口。对于使用过 XMLHttpRequest
的人来说应该很熟悉,不过这个新的 API 提供了更加强大灵活的特性。
概念和用法
Fetch 提供了对 Request
和 Response
(以及其他与网络请求有关的)对象通用的定义。它之后能够被使用到很多场景中: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是支持Async的,但是正确的写法很多网站上都有问题,应该如下
javascript
``