传统 Ajax 已死,Fetch 永生

139

image

原谅我做一次标题党,Ajax 不会死,传统 Ajax 指的是 XMLHttpRequest(XHR),未来现在已被 Fetch 替代。

最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的 $.ajax 迁移到 Fetch,上线一个多月以来运行非常稳定。结果证明,对于 IE8+ 以上浏览器,在生产环境使用 Fetch 是可行的。

由于 Fetch API 是基于 Promise 设计,有必要先学习一下 Promise,推荐阅读 MDN Promise 教程。旧浏览器不支持 Promise,需要使用 polyfill es6-promise

本文不是 Fetch API 科普贴,其实是讲异步处理和 Promise 的。Fetch API 很简单,看文档很快就学会了。推荐 MDN Fetch 教程 和 万能的WHATWG Fetch 规范

Why Fetch

XMLHttpRequest 是一个设计粗糙的 API,不符合关注分离(Separation of Concerns)的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好。

Fetch 的出现就是为了解决 XHR 的问题,拿例子说明:

使用 XHR 发送一个 json 请求一般是这样:

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

使用 Fetch 后,顿时看起来好一点

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

使用 ES6 的 箭头函数 后:

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

现在看起来好很多了,但这种 Promise 的写法还是有 Callback 的影子,而且 promise 使用 catch 方法来进行错误处理的方式有点奇怪。不用急,下面使用 async/await 来做最终优化:

注:async/await 是非常新的 API,属于 ES7,目前尚在 Stage 1(提议) 阶段,这是它的完整规范。使用 Babel 开启 runtime 模式后可以把 async/await 无痛编译成 ES5 代码。也可以直接使用 regenerator 来编译到 ES5。

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}
// 注:这段代码如果想运行,外面需要包一个 async function

duang~~ 的一声,使用 await 后,写异步代码就像写同步代码一样爽await 后面可以跟 Promise 对象,表示等待 Promise resolve() 才会继续向下执行,如果 Promise 被 reject() 或抛出异常则会被外面的 try...catch 捕获。

Promise,generator/yield,await/async 都是现在和未来 JS 解决异步的标准做法,可以完美搭配使用。这也是使用标准 Promise 一大好处。最近也把项目中使用第三方 Promise 库的代码全部转成标准 Promise,为以后全面使用 async/await 做准备。

另外,Fetch 也很适合做现在流行的同构应用,有人基于 Fetch 的语法,在 Node 端基于 http 库实现了 node-fetch,又有人封装了用于同构应用的 isomorphic-fetch

注:同构(isomorphic/universal)就是使前后端运行同一套代码的意思,后端一般是指 NodeJS 环境。

总结一下,Fetch 优点主要有:

  1. 语法简洁,更加语义化

  2. 基于标准 Promise 实现,支持 async/await

  3. 同构方便,使用 isomorphic-fetch

Fetch 启用方法

下面是重点↓↓↓

先看一下 Fetch 原生支持率:
image

原生支持率并不高,幸运的是,引入下面这些 polyfill 后可以完美支持 IE8+ :

  1. 由于 IE8 是 ES3,需要引入 ES5 的 polyfill: es5-shim, es5-sham

  2. 引入 Promise 的 polyfill: es6-promise

  3. 引入 fetch 探测库:fetch-detector

  4. 引入 fetch 的 polyfill: fetch-ie8

  5. 可选:如果你还使用了 jsonp,引入 fetch-jsonp

  6. 可选:开启 Babel 的 runtime 模式,现在就使用 async/await

Fetch polyfill 的基本原理是探测是否存在 window.fetch 方法,如果没有则用 XHR 实现。这也是 github/fetch 的做法,但是有些浏览器(Chrome 45)原生支持 Fetch,但响应中有中文时会乱码,老外又不太关心这种问题,所以我自己才封装了 fetch-detectorfetch-ie8 只在浏览器稳定支持 Fetch 情况下才使用原生 Fetch。这些库现在每天有几千万个请求都在使用,绝对靠谱

终于,引用了这一堆 polyfill 后,可以愉快地使用 Fetch 了。但要小心,下面有坑:

Fetch 常见坑

  • Fetch 请求默认是不带 cookie 的,需要设置 fetch(url, {credentials: 'include'})

  • 服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。

竟然没有提到 IE,这实在太不科学了,现在来详细说下 IE

IE 使用策略

所有版本的 IE 均不支持原生 Fetch,fetch-ie8 会自动使用 XHR 做 polyfill。但在跨域时有个问题需要处理。

IE8, 9 的 XHR 不支持 CORS 跨域,虽然提供 XDomainRequest,但这个东西就是玩具,不支持传 Cookie!如果接口需要权限验证,还是乖乖地使用 jsonp 吧,推荐使用 fetch-jsonp。如果有问题直接提 issue,我会第一时间解决。

标准 Promise 的不足

由于 Fetch 是典型的异步场景,所以大部分遇到的问题不是 Fetch 的,其实是 Promise 的。ES6 的 Promise 是基于 Promises/A+ 标准,为了保持简单简洁,只提供极简的几个 API。如果你用过一些牛 X 的异步库,如 jQuery(不要笑) 、Q.js 或者 RSVP.js,可能会感觉 Promise 功能太少了。

没有 Deferred

Deferred 可以在创建 Promise 时可以减少一层嵌套,还有就是跨方法使用时很方便。
ECMAScript 11 年就有过 Deferred 提案,但后来没被接受。其实用 Promise 不到十行代码就能实现 Deferred:es6-deferred。现在有了 async/await,generator/yield 后,deferred 就没有使用价值了。

没有获取状态方法:isRejected,isResolved

标准 Promise 没有提供获取当前状态 rejected 或者 resolved 的方法。只允许外部传入成功或失败后的回调。我认为这其实是优点,这是一种声明式的接口,更简单。

缺少其它一些方法:always,progress,finally

always 可以通过在 then 和 catch 里重复调用方法实现。finally 也类似。progress 这种进度通知的功能还没有用过,暂不知道如何替代。

最后

Fetch 替换 XHR 只是时间问题,现在看到国外很多新的库都默认使用了 Fetch。

最后再做一个大胆预测:由于 async/await 这类新异步语法的出现,第三方的 Promise 类库会逐渐被标准 Promise 替代,使用 polyfill 是现在比较明智的做法。

转至我的博客,原文地址:https://github.com/camsong/blog/issues/2

想不想加入阿里巴巴一起玩 ES7,React,FRP 等最新技术,欢迎简历到 neosoyn@gmail.com

你可能感兴趣的

34 条评论
thedb2333 · 2017年01月18日

补充一下文章中async的使用:

async function(){

try {
      let response = await fetch(url);
      let data = await response.json()
            //文章中这里漏了await,因为response.json()后需要.then才能接收data
      console.log(data);
}catch(e) {
    console.log("Oops, error", e);
}

}

+6 回复

0

fetch返回一个promise,response不可以直接调用json方法

IVLIU · 2017年08月18日
0

赞,评论字数过少

23cy · 2017年08月25日
0

@IVLIU json()方法是fetch()的API MDN-原话---"方法使用一个 Response 流,并将其读取完成。它返回一个 promise ,解析结果是将文本体解析为 JSON"

Gruidae · 2017年09月04日
GrahamLe · 2016年11月08日

作者是应届进阿里的么?

+2 回复

1

这个就非常的牛叉了,哈哈哈哈哈哈

王鹏 · 2017年04月20日
wghe110 · 2015年10月09日

太高端,看不懂

+1 回复

天赢金创 · 2015年09月30日

看了yahoo/fiexible,好复杂了,下午折腾了一下,文档太少,看不明白,不过感觉同构应该是js的未来吧

回复

Cam 作者 · 2015年09月30日

yahoo/flexible 确实有点复杂,可以试试 Redux http://camsong.github.io/redux-in-chinese/docs/recipes/ServerRendering.html

回复

天赢金创 · 2015年09月30日

好的,这一块估计还要一段时间发展吧,redux学习的时候看的就是你翻译的文档,辛苦了

回复

lqixv · 2015年10月01日

es7的代码还可以,前面es5、es6的代码写起来感觉很别扭

回复

88888888888888888 · 2015年10月01日

的确 至少我现在是shim,而不是xhr

回复

zy0695354 · 2015年10月08日

5658526

回复

bluedream · 2015年10月10日

刚在ata看了这篇文章,没想到在这里也看见了 ^_^

回复

cryms · 2015年10月11日

aaa

回复

fuchao2012 · 2015年10月12日

如何实现 ifModified 呢?换句话说,如何能让服务器返回303呢?

回复

Cam 作者 · 2015年10月13日

Fetch 也是基于 HTTP 规范,可以设置 request head https://fetch.spec.whatwg.org/#concept-request-cache-mode

回复

0

求教怎么设置啊,没看明白...

Andy_Sun · 2017年09月21日
Renjinkui · 2015年10月13日

Usuds

回复

sabrinaluo · 2016年01月23日

楼主你好,http://web.jobbole.com/82601/ 这篇里说使用defferd模式是错的…关于promise的说法众说纷纭,究竟怎么样才是standard practice这个业界有木有一个标准呢?

回复

Cam 作者 · 2016年01月23日

这篇文章说的对,只是有些细节翻译的不清楚,建议看下原文。http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html

Deferred 不建议使用。

回复

dbdou · 2016年07月19日

请问下fetch完数据,接下来的链式方法中对数据进行json()格式化,这一步需要花销1秒多的时间,这是正常情况吗?

回复

heiyanquan · 2016年09月02日

不错不错,学到了很多知识,看来自己懂的还是太少了

回复

chen4342024 · 2016年09月08日

是什么促使xhr -> fetch 呢,用 jquery 的ajax,也一样可以写的很简介呀

回复

0

而且还要引入那么一堆依赖,确实有些看不懂为什么要fetch,望解惑

MrDoo · 6月3日
阳台晒阳光 · 2016年09月09日

随着mvvm框架的普及,jq要退出舞台了吧。而且jq只是库,并不是标准

回复

载入中...