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 微信公众号，我们将定期分享高质量的技术干货内容