全面分析前端的网络请求方式(4)

Fetch API提供了一个全局的fetch()方法，以及几个辅助对象来发起一个网络请求。

• fetch()

fetch()方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，，并传回 Response 对象。

• Headers

可以通过 Headers() 构造函数来创建一个你自己的 headers 对象，相当于 response/request 的头信息，可以使你查询到这些头信息，或者针对不同的结果做不同的操作。

var myHeaders = new Headers(); 
 
myHeaders.append("Content-Type", "text/plain");  

• Request

通过 Request() 构造函数可以创建一个Request 对象，这个对象可以作为fetch函数的第二个参数。

• Response

在fetch()处理完promises之后返回一个Response 实例，也可以手动创建一个Response实例。

九、fetch polyfill源码分析

由于fetch是一个非常底层的API，所以我们无法进一步的探究它的底层，但是我们可以借助它的polyfill探究它的基本原理，并找出其中的坑点。

代码结构

由代码可见，polyfill主要对Fetch API提供的四大对象进行了封装：

fetch 封装

代码非常清晰：

• 构造一个Promise对象并返回
• 创建一个Request对象
• 创建一个XMLHttpRequest对象
• 取出Request对象中的请求url，请求方发，open一个xhr请求，并将Request对象中存储的headers取出赋给xhr
• xhr onload后取出response的status、headers、body封装Response对象，调用resolve。

异常处理

可以发现，调用reject有三种可能：

• 1.请求超时
• 2.请求失败

注意：当和服务器建立简介，并收到服务器的异常状态码如404、500等并不能触发onerror。当网络故障时或请求被阻止时，才会标记为 reject，如跨域、url不存在，网络异常等会触发onerror。

所以使用fetch当接收到异常状态码都是会进入then而不是catch。这些错误请求往往要手动处理。

• 3.手动终止

可以在request参数中传入signal对象，并对signal对象添加abort事件监听，当xhr.readyState变为4（响应内容解析完成）后将signal对象的abort事件监听移除掉。

这表示，在一个fetch请求结束之前可以调用signal.abort将其终止。在浏览器中可以使用AbortController()构造函数创建一个控制器，然后使用AbortController.signal属性

这是一个实验中的功能，此功能某些浏览器尚在开发中

Headers封装

在header对象中维护了一个map对象，构造函数中可以传入Header对象、数组、普通对象类型的header，并将所有的值维护到map中。

之前在fetch函数中看到调用了header的forEach方法，下面是它的实现：

可见header的遍历即其内部map的遍历。

另外Header还提供了append、delete、get、set等方法，都是对其内部的map对象进行操作。

（编辑：ASP站长网）