XHR、AJAX、Fetch和Axios之间的区别

项目	本质
XHR	浏览器接口（较老了）
AJAX	基于XHR的异步加载操作
Fetch	XHR的最新替代方案，浏览器API
Axios	XHR的现代版本封装

1. XHR

全称 XMLHttpRequest，基于XML的HTTP请求。它是一个浏览器接口，使得Javascript可以进行HTTP(S)通信，因为它的出现，AJAX操作得以诞生

var xhr = new XMLHttpRequest()
xhr.open('GET', 'example.php');
xhr.send();
xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 && xhr.status == 200 ) {
        alert( xhr.responseText );
    } else {
        alert( xhr.statusText );
    }
};

缺点：

• 使用起来也比较繁琐，需要设置很多值
• 早期的IE浏览器有自己的内置对象，这样需要写兼容代码判断是否为XMLHttpRequest对象

为了方便操作DOM和避免浏览器兼容问题，一般不会直接使用XHR，而是使用jqery的$.ajax

2. AJAX

全称 Asynchronous JavaScript and XML，异步的 JavaScript 和 XML，指的是异步加载操作，它是基于XMLHttpRequest接口实现的。

jQuery提供了&.ajax，对原生XHR做了封装，简化了使用

$.ajax({url:"demo_test.txt",success:function(result){
        $("#div1").html(result);
    }});

优点：

• 对XHR做了封装，简化了使用
• 增加了对JSONP支持，可以简单处理部分跨域

缺点：

• 如果有多个请求，并且有依赖关系的话，容易形成回调地狱
• ajax是jQuery中的一个方法。如果只是要使用ajax却要引入整个jQuery非常的不合理

3.Fetch

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

它是 XHR的替代方案

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

优点：

• 基于标准promise实现，支持async/await
• 语法简介，更加语义化

缺点：

• 默认不会带cookie，需要添加配置项：fetch(url,{credentials:‘include’})
• fetch没办法原生检测请求的进度，XHR可以
• 错误状态码不会导致reject，只有网络错误导致请求不能完成才会
• 不支持abort，不支持超时控制，使用setTimeout及promise.reject的实现的超时控制不能阻止请求过程继续在后台运行，会造成流量的浪费

4.Axios

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

import axios from 'axios'
axios.get(url).then().catch()

优点：

• 基于标准promise实现，支持async/await
• 能够拦截请求和响应
• 自动转换JSON数据
• 能够取消请求

缺点：

• 现代浏览器才支持

参考链接

• XHR和AJAX终于搞懂了！！ - 知乎 (zhihu.com)
• XMLHttpRequest - Web API 接口参考 | MDN (mozilla.org)
• 使用 Fetch - Web API 接口参考 | MDN (mozilla.org)
• XHR，ajax，axios，fetch之间的区别 - 掘金 (juejin.cn)