ajax、axios、fetch的区别及优缺点

ajax是js异步技术的术语，早起相关的api是xhr，它是一个术语。
fetch是es6新增的用于网络请求标准api，它是一个api。
axios是用于网络请求的第三方库，它是一个库。

1. ajax

XMLHttpRequest（XHR）是Web浏览器的API，可以在不刷新页面的情况下请求特定 URL，获取数据，允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML，多个请求之间如果有先后关系的话，就会出现回调地狱。

const SERVER_URL = "/server";
let xhr = new XMLHttpRequest();
// 创建 Http 请求
xhr.open("GET", SERVER_URL, true);
// 设置状态监听函数
xhr.onreadystatechange = function() {
  if (xhr.readyState !== 4) return;
  // 当请求成功时
  if (xhr.status === 200 || xhr.status === 304) {
    console.log(xhr.responseText);
  } else {
    console.error(xhr.statusText);
  }
};
// 发送 Http 请求
xhr.send();

//使用Promise封装AJAX请求
const getJSON = function (url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, false);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onreadystatechange = function () {
      if (xhr.readyState !== 4) return;
      if (xhr.status === 200 || xhr.status === 304) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(xhr.responseText));
      }
    };
    xhr.send();
  });
};

2. fetch

fetch是es6新增的HTTP数据请求的方式，是XMLHttpRequest的一种替代方案，它是一个api， Fetch API 是基于 promise 进行设计的，写法上也更加的方便和简单，更为符合关注点分离的原则，不会将所有的配置和状态混淆在一个对象里。

fetch缺点：

• fetch默认不会带cookie，需要添加配置项。

  fetch(url, {credentials: 'include'})

• 只对网络请求报错，对于诸如 400 和 500 之类的错误，并不会走 reject 分支。
• 不支持 abort 和 超时控制。
• 无法检测请求进度。
• Fetch API规定，get方式请求数据时无法通过options传输参数，只能将数据拼接到url中

3. axios

Axios在浏览器端是XMLHttpRequest的进一步封装，并且增加了一些特性，如支持Promise、自动转换JSON等,基于 promise 提供了一套 promise 风格的链式调用 API。 axios 的优点：

• 支持 promise API。
• 支持请求和响应拦截。
• 提供并发请求接口功能。
• 轻量高效、简单易用。
• 客户端支持防止CSRF。 （ 就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略）
• 支持 node 端。