ajax到fetch的发展与比较

引言

随着前端技术的飞速发展，传统的Ajax，指 XMLHttpRequest（XHR），正逐步被Fetch所取代。三年前，我们还在用JQuery的$.ajax方法请求数据，一晃眼，axios和fetch都已经开始分别抢占“请求”这个前端高地。本文将会尝试着阐述他们之间的区别，并给出自己的一些理解。

XHR

首先来看一下应用XHR发送请求的方法，可以看到，XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。

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();

JQuery ajax

无需多言，JQuery ajax是对原生XHR的封装，除此以外还增添了对JSONP的支持。JQuery ajax经过多年的更新维护，使用起来非常方便，优点无需多言；如果要说缺点，那就是：

• 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
• 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
• JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

尽管JQuery对我们前端的开发工作曾有着（现在也仍然有着）深远的影响，但是我们可以看到随着VUE，REACT新一代框架的兴起，以及ES规范的完善，更多API的更新，JQuery这种大而全的JS库，未来的路会越走越窄。

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

Fetch

Fetch是AJAX的替代品，它的API是基于Promise设计的。
Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。

他的优点是：

• 更加底层，提供的API丰富
• 脱离了XHR，是ES规范里新的实现方式
• 基于标准 Promise 实现，支持 async/await
• 语法简洁，更加语义化，诸如：

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

使用async/await

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

相对的，Fetch也有一些缺点，首先就是兼容性的问题

可以看到，Fetch的兼容性并不好，但是通用引入一些polyfill，还是可以兼容IE8的

• 由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham
• 引入 Promise 的 polyfill: es6-promise
• 引入 fetch 探测库：fetch-detector
• 引入 fetch 的 polyfill: fetch-ie8
• 可选：如果你还使用了 jsonp，引入 fetch-jsonp
• 可选：开启 Babel 的 runtime 模式，使用 async/await

Fetch和Ajax区别

fetch规范与jQuery.ajax()主要有以下三点不同：

1. 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
2. fetch() 不会接受跨域 cookies；你也不能使用fetch()建立起跨域会话。其他网站的Set-Cookie头部字段将会被无视。
3. fetch 不会发送 cookies。除非你使用了credentials的初始化选项，
   设置 fetch(url, {credentials: ‘include’})。
   （自2017年8月25日以后，默认的credentials政策变更为same-origin。Firefox也在61.0b13版本中，对默认值进行修改）