ajax、axios、fetch的区别，整理

Ajax（xhr）

AJAX Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。其缺点如下：

本身是针对MVC编程，不符合前端MVVM的浪潮
基于原生XHR开发，XHR本身的架构不清晰
不符合关注分离（Separation of Concerns）的原则
配置和调用方式非常混乱，而且基于事件的异步模型不友好。

Ajax是一种概念，是一种标准和方法，比如jQuery有封装的Ajax方法来发送get和post请求，其底层原理为使用XMLHttpRequest对象实现。目前已经有Xhr2了，可以传文件，计算上传进度等等。Xhr当然可以自己实现ajax，就是略微麻烦些：

// 1. 创建 XMLHttpRequest 实例
let xhr = XMLHttpRequest()
// 2. 打开和服务器的连接
xhr.open('get', 'URL')
// 3.发送
xhr.send()
// 4. 接收变化。
xhr.onreadystatechange = () => {
    if(xhr.readyState == 4 && xhr.status == 200){   // readyState: ajax 状态，status：http 请求状态
        console.log(xhr.responseText);   //响应主体
    }
}

TIPS（补充：MVC和MVVM）：

1. MVC（Model View Controller）是软件工程中的一种软件架构模式，它把软件系统分为模型、视图和控制器三个基本部分。用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

2.MVVM，是Model-View-ViewModel的简写，是M-V-VM三部分组成。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

axios

Axios 是一种基于Promise封装的HTTP客户端，相比jq中的ajax更轻量化，它内部有两个拦截器，分别是request拦截器和response拦截器。在SPA应用中，通常会使用token进行用户身份认证，这就要求每次请求必须携带用户的身份信息，针对这个需求，为了避免在每个请求中单独处理，我们可以通过封装统一的request函数来为每隔请求统一添加token信息。这就是拦截器的作用。其特点如下：

浏览器端发起XMLHttpRequests请求
node端发起http请求
支持Promise API
监听请求和返回
对请求和返回进行转化，自动转换json数据
客户端支持抵御 CSRF 攻击

axios常用的方法有get、post、put、patch、delete等。其中get和post返回的都是promise对象，可以使用promise方法。目前vue中用的怪多。get方法例子：

axios.get('apiURL', {
    param: {
        id: 1
    }
    // param 中的的键值对最终会 ? 的形式，拼接到请求的链接上，发送到服务器。
}).then(res => {
    console.log(res);
})
.catch( error => {
    console.log(error)
}

关于axios的知识点：

axios拦截器执行顺序：

//添加两个请求拦截，看到时候先执行哪个
axios.interceptors.request.use(config => {
  console.log(`请求1`);
  return config;
});
axios.interceptors.request.use(config => {
  console.log(`请求2`);
  return config;
});

//添加两个响应拦截，看到时候先执行哪个
axios.interceptors.response.use(response => {
  console.log(`响应1`);
  return response.data;
});
axios.interceptors.response.use(response => {
  console.log(`响应2`);
  return response;
});

// 发送请求 
axios.get('/posts')
  .then(response => {
    console.log('success');
  }) 

//**************结果*********************//
console.log("请求2");
console.log("请求1");
console.log("响应1");
console.log("响应2");
console.log("success");
//原因，请求拦截使用的是数组的unshift方法，响应拦截使用的是push方法

fetch

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多。fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。 fetch是http请求数据的方式，它使用Promise，但不使用回调函数。fetch采用模块化设计，通过数据流处理数据，对于请求大文件或网速慢的情况相当有用。默认情况下fetch不会接收或发送cookies。

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

缺点：

过于底层，很多状态码没有进行封装。只对网络请求报错，对400，500都当做成功的请求。
不像XHR，fetch不能检测请求进度。
不能阻断请求，请求过程继续在后台运行，造成了流量的浪费。不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制。
兼容性差