Fetch API 初步解读

文 | Leigh，UPYUN 已得到受权
微信文章连接：http://t.cn/R4afStO

在咱们平常的前端开发中，XMLHttpRequest 是必不可少会遇到的一个东东。XHR 最初是由微软引入其 MSXML 的，Web 开发者须要经过 ActiveX 去调用，然后，Mozilla 开发者开发了一个近似的东西，为了方便在 JavaScript 中使用，才用 XMLHttpRequest 为名的对象封装了一下。使用 XHR 发起一个请求，大体代码就会以下所示：

以上的代码，相信每一个前端开发都有写过，然而就算不写那一段长长的兼容代码，光是后面发起请求的那段代码，也会让人以为头大。就更不用说所谓的 XMLHttpRequest，其实如今几乎没人用 XML 作浏览器短的数据交互形式了。

尽管众多三方框架已经封装了一些好用的 api，例如 jQuery.ajax()，angular.js 的 $http，可是若是有个更简单的方法呢？

Syntax

fetch() 的语法很简单，以下所示：

其中：

input 参数，便可以直接传入一个 url，也能够传入一个 Request 对象;

init 参数是可选，是一个包含了请求方法，请求头部，请求主体，模式，凭证，缓存模式等配置的对象。

从语法中能够看到，fetch() API 会返回一个 Promise。

所以，开头所提到的例子，能够修改为这样：

除了普通的 get 请求，发起一个表单 POST 请求也是至关简单：

同理，若是是 json 格式的数据的话：

响应处理

与上述 Request 对应的，Fetch API 还对应有一个 Response 用于表示响应结果，Response，是一个 Stream 对象，其提供了众多便利的属性及方法以供开发者处理。方法通常会返回一个 Promise，举个例子，处理 json 数据。简单示例：

这里，你固然也能够选择使用传统的 JSON.parse()，但无疑，使用 .json() 方法更加方便快捷，适合在 Promise 中使用。

同理，若是你但愿处理请求结果为纯文本，那么 Response.text() 将会颇有帮助。除此以外，还有 .blob(), formData() 等方法可供使用。Fetch API 所支持的响应类型有以下几种：

• ArrayBuffer

• ArrayBufferView(Uint8Array and friends)

• Blob/File

• String

• URLSearchParams

• FormData

从 Response 的属性中，咱们也能轻易提取到响应头部及 Metadata 的相关信息：

其中，response.headers 就是一个 Header 类型的对象，咱们可使用 Headers 类提供的各类方法来操做，除了上面代码中的 .get() 方法外，Headers 还有 .has() 方法，用于检查是否包含某个头部信息；.getAll() 方法，将制定的头部信息以数组形式所有返回，等等，具体能够参考 Headers 类型文档

响应类型

每当咱们用 fetch 发起一个请求，其响应都会被赋予一个响应类型，'basic'，'cors' 或者 'opaque'。

若是请求是同源的，那么响应类型就是 'basic'，若是跨域的请求，则是 'cors'，若是对非同源的资源发起一个请求，而且其没有返回 CORS 头的话，则是 'opaque' 类型。'opaque' 类型的响应咱们将不能读取所返回的数据或者查看请求的状态，也就是说，咱们压根没办法知道请求是否成功了。

咱们能够在发起请求的时候，指定一个模式来确保只有相应的请求会被容许：

• same-origin: 只有同源的请求才会被容许。

• cors: 容许同源或者非同源可是返回正确 CORS 头部的请求。

• cors-with-forced-preflight: 在正式请求以前，老是先发起一个 preflight 检查。

• no-cors: 用以发起非同源又没有返回 CORS 头的请求。

注意：由于 Cache API 尚未在 window 对象中实现，所以，目前 fetch api 并无支持从 window 域中发起 no-cors 请求，可是你能够在 Service Worker 中使用。

投入使用

Fetch API 并无彻底完成，所以，浏览器对其支持也不彻底，在实际使用的时候还须要注意兼容问题，能够经过特性检查，检查 Headers, Request, Response 或者 fetch 是否存在来判断浏览器的支持状况。也能够参考 Can I Use （http://caniuse.com/#feat=fetch）提供的兼容状况列表。你也可使用 GitHub （https://github.com/github/fetch）提供的 polyfill，他能够兼容到最低 IE9，相信能够知足大多数的状况了。

在将来，Cache API 的实现完成后，Fetch API 将能很好地处理离线状态下的请求，这应该是你们最期待的特性了。

—— The End ——

本文为 UPYUN 独家刊载，做者：Leigh。转载须注明做者和来源，并保留原文连接。有疑问请联系 UPYUN 公众号（upaiyun）
原文地址：http://zhuli.me/fetch-api-intro/

欢迎关注 UPYUN 微信公众号，咱们将按期分享高质量的技术干货内容