XHR vs Fetch

[leohxj]

浏览器端能发送网络请求，主要都是基于 XMLHttpRequest 或 Fetch 这两个 api 实现的。所以常用的网络请求库也都是基于这些 api 的封装。

XMLHttpRequest

标准

WHATWG: XMLHttpRequest Standard

XMLHttpRequest 包含：Level 1 和 Level 2 两个部分。现在统一称之为 XMLHttpRequest.

• Level 1: 起初定义是由微软提出的，放在 WHATWG's 的 HTML 部分， 2006 年迁移到 W3C 维护，这算 的东西。
• Level 2 : W3C 在 2008年的时候发起了 Level 2 的草案，做了一个特性增强，比如 CORS 的支持。在 2011 年完成，将之前的 Level 1 一起并入 XMLHttpRequest 维护。并且将标准的开发和维护交还给了 WHATWG 组织。

Level 1 的缺点：

• 只支持文本数据的传送，无法用来读取和上传二进制文件。
• 传送和接收数据时，没有进度信息，只能提示有没有完成。
• 受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据。

所以 Level 2 改进了：

• 可以设置HTTP请求的超时时间。
• 可以使用FormData对象管理表单数据。
• 可以上传文件。
• 可以请求不同域名下的数据（跨域请求）。
• 可以获取服务器端的二进制数据。
• 可以获得数据传输的进度信息。

兼容性

Can I Use: XHR: 平台上的 XHR 指的就是 XHR 2 标准。

目前, 主流浏览器基本上都支持XHR2, 除了IE系列需要IE10及更高版本. 因此IE10以下是不支持XHR2的.

对于IE8,9而言, 只有一个阉割版的 XDomainRequest 可用

IE7以下的，针对跨域的情况，建议就使用 JSONP 吧。

polyfill

现代开发的场景中，多数使用的就是 XHR 2 特性，比如 CORS, 所以兼容性上， XHR 在 IE 的支持程度是 ie 10+, 这是因为 IE 8~9 中没有实现新的标准的 XHR, 但是如果要在 IE 8-9 下使用，IE 提供了一个 类似 XHR 的对象： XDomainRequest. 有这方面需求的，可以引入如下 polyfill: （XDomainRequest 同样有些问题¹）

• LuvDaSun/xhr-polyfill
• JuliaRechkunova/xhr-or-xdr
• axios 中的实现

另外： IE5 - 6中是没有 XHR 对象的, 因为还没有成为标准，所以使用的是 ActiveXObjec。

Fetch

标准

WHATWG: Fetch Standard

Fetch 是随着 HTML5 标准发布的用于发送请求的 api， 它提供了许多与 XMLHttpRequest 相同的功能，但被设计成更具可扩展性和高效性。

Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能。

Service Workers 是一个利用了 Fetch 实现的接口的例子。

fetch 属于 WindowOrWorkerGlobalScope 的一部分，暴露在 Window 或WorkerGlobalScope 对象上。所以在浏览器中，你可以直接调用 fetch。

兼容性

Can I Use: Fetch

从图中我们可以看到， IE 是不支持的。

fetch对中文支持有问题, 建议从chrome46起使用fetch. 传送门: fetch中文乱码 .

polyfill

主要解决的是 IE 的兼容性问题：

• 由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham
• 引入 Promise 的 polyfill: es6-promise
• 引入 fetch 探测库：fetch-detector
  • chrome 原生支持 Fetch，但响应中有中文时会乱码，
• 引入 fetch 的 polyfill: fetch-ie8
  • 兼容 ie10 还需要引入 github/fetch
• 可选：如果你还使用了 jsonp，引入 fetch-jsonp
• 可选：开启 Babel 的 runtime 模式，现在就使用 async/await

使用babel-runtime 时注意: fetch底层实现用到Promise就是从全局中去取的，拿不到这报上述错误。

github/fetch: 基于 XHR 实现的 fetch

isomorphic-fetch: 兼容了下 whatwg-fetch 和 node-fetch 。

XHR vs Fetch²

Fetch 相对 XHR 来说具有简洁、易用、声明式、天生基于 Promise 等特点。XHR 使用方式复杂，接口繁多。

但是 Fetch 也有它的不足，相对于 XHR 来说，目前它具有以下劣势：

• 不能取消（虽然 AbortController 能实现，但是目前兼容性基本不能使用，可以使用 polyfill ）
• 不能获取进度
• 不能设置超时（可以通过简单的封装来模拟实现）
• 兼容性目前比较差（可以使用 polyfill 间接使用 XHR 来优雅降级，这里推荐使用 isomorphic-fetch ）

参考

• wikipedia: XMLHttpRequest

• 你不知道的 XMLHttpRequest

• WHATWG: Fetch API

• MDN: Fetch

• 传统 Ajax 已死，Fetch 永生

• fetch 没有你想象的那么美

• fetch 使用的常见问题和解决方法

• 也许你对 Fetch 了解得不是那么多（上）

• 凹凸实验室: 了解 Fetch API

Footnotes

1. 听说你的 fetch 还要兼容 IE9 ↩

2. Fetch 与 XHR 比较 ↩