XHR，ajax，axios，fetch傻傻分不清？

相关定义：

• XMLHttpRequest

• Fetch

• AJAX

先从AJAX入手，下面的定义很重要：

AJAX（Asynchronous JavaScript And XML ）是一种使用 XMLHttpRequest 技术构建更复杂，动态的网页的编程实践。
AJAX允许只更新一个 HTML 页面的部分 DOM，而无须重新加载整个页面。AJAX还允许异步工作，这意味着当网页的一部分正试图重新加载时，您的代码可以继续运行。
AJAX正在逐渐被 JavaScript 框架中的函数和官方的 Fetch API 标准取代。

回答 1： AJAX vs Fetch

AJAX 和 Fetch都可以访问和操纵 HTTP 管道（发出HTTP请求与接收HTTP响应），是解决动态网页的技术方案。

未来发展方向是Fetch取代AJAX

回答 2： XHR vs AJAX

XHR（XMLHttpRequest）对象用于与服务器交互，是AJAX技术方案的基础，也可以说，使用XHR对象来发送一个Ajax请求。

看看如何使用 XHR 发送 AJAX请求。

function sendAjax() {
  //构造表单数据
  var formData = new FormData();
  formData.append('username', 'johndoe');
  formData.append('id', 123456);
  //创建xhr对象 
  var xhr = new XMLHttpRequest();
  //设置xhr请求的超时时间
  xhr.timeout = 3000;
  //设置响应返回的数据格式
  xhr.responseType = "text";
  //创建一个 post 请求，采用异步
  xhr.open('POST', '/server', true);
  //注册相关事件回调处理函数
  xhr.onload = function(e) { 
    if(this.status == 200||this.status == 304){
        alert(this.responseText);
    }
  };
  xhr.ontimeout = function(e) { ... };
  xhr.onerror = function(e) { ... };
  xhr.upload.onprogress = function(e) { ... };
  
  // 监听xhr状态
  xhr.onreadystatechange = function () {
    try {
       switch(xhr.readyState){
          case 1://OPENED
          break;
          case 2://HEADERS_RECEIVED
          break;
          case 3://LOADING
          break;
          case 4://DONE
          // Everything is good, the response was received.
            if (xhr.status === 200) {
               // Perfect!
            } else {
                // There was a problem with the request.
                // For example, the response may hava a 404 (Not Found)
                // or 500 (Internal Server Error) response code.
             }
           break;
          }
      } catch (e) {
        // 通信错误的事件中（例如服务器宕机）
        alert('Caught Exception: ' + e.description)
     }
    
  //发送数据
  xhr.send(formData);
}

回答 3： XHR vs axios

Axios是一个基于promise的HTTP库，可以用在浏览器和 node.js 中。它本质也是对原生XMLHttpRequest的封装，只不过是Promise的实现版本，符合最新的ES规范。

有了上面的了解，再回头对比下AJAX 和 Fetch，Fetch有什么优缺点呢？

优点

• fetch更加底层，提供的API丰富(request和response)
• fetch基于标准promise实现，支持async/await

缺点

• 只有网络错误（如断网）才会调用reject，而对400，500这种错误并不会reject
• 默认不会带cookie，需要添加配置项：fetch(url,{credentials:‘include’})
• 不支持abort，不支持超时控制或主动取消 （XHR支持xhr.ontimeout超时自动取消，也支持xhr.abort()主动取消请求）
• 无法检测请求的进度（XHR可以）