9102年了XHR(jQuery)、Fetch和axios改选谁？

太长不看

1. XMLHtppRequest：设计关注点不分离（数据输入/输出、状态变化追踪全部在一个对象里）、代码不具备时序性(由callback造成)；
2. jQuery-ajax：关注点不分离、代码非顺序执行、引入了非标准语义；
3. Fetch：基于ES6 Promise设计关注点分离、支持ES6语法、代码具备时序性(async/await、promise)、易于同构、兼容性略低于XMLHtppRequest；
4. axios：基于ES6Promise设计关注点分离、支持ES6语法、代码具备时序性、易于同构、封装完善久经沙场适合在生产环境使用；
5. XMLHtppRequest年老色衰，Fetch初露锋芒，axios正当壮年；
6. 本文完（大雾）

XMLHtppRequest

• 扫盲：
  早期的网页但凡遇到获取数据的场景就要刷新页面，交互体验？没有的根本不存在。XMLHttpRequest（后文称XHR）就是此场景的解决方案用以改善体验。由XHR提供HTTP能力使浏览器与服务器产生交互（获取/提交数据），这些交互也不再需要刷新页面而只是局部更新。
  XHR是一个对象，这个对象下包含有许多“能力”，譬如：
  • Event handler
    事件处理回调：onloadstart、onprogress、onabort、onerror、onload、ontimeout、onloadend、onreadystatechange
  • readyState
    XHR的状态值：unsent(0)、opened(1)、headers received(2)、loading(3)、done(4)
  • Request Concept
    请求概念：XHR下的open、setRequestHeader、timeout、send、abort、withCrendtials等都属于这个概念；
  • Response Concept
    响应概念：XHR下的responseURL、status、response等都属于这个概念；

Event handler和readyState将不再赘述，值得关注的是Request和Response两个概念。为什么叫概念？
因为在XHR对象中并不存在名为Response/Request的属性/对象/方法。下图是XHR的内部构造示意图，可以看到XHR本身拥有非常多的属性、方法导致内部混乱它既有Request也有Response的方法，同时还包含状态追踪的EventHandler。正是因此XHR本身的实现略显混乱。

同时也导致XHR的代码在书写上更易混淆，譬如初学者就不容易分清readyState(xhr的状态)和status(网络请求的状态)、response和responseText等。基于回调的书写方式也增加了代码阅读难度，下面是使用XHR对象发起HTTP请求的简单例子：

// 老版本IE的兼容
var xhr
if (window.XMLHttpRequest) {
   　 // Mozilla, Safari...
  　xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    // IE
  　try {
   
    　xhr = new ActiveXObject('Msxml2.XMLHTTP');
 　 } catch (e) {
   
  　  try {
   
    　  xhr = new ActiveXObject('Microsoft.XMLHTTP');
   　 } catch (e) {
   }
 　 }
}
// onreadystatechange 方法
var onReadyStateChange = () => {