分享 Fetch API 初步解读

upyun · 2016年01月05日 · 最后由 vkill 回复于 2016年01月10日 · 3134 次阅读

文 | 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 所支持的响应类型有如下几种:

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

需要 登录 后方可回复, 如果你还没有账号请 注册新账号