fetch和ajax、axios对比

axios和ajax是对XMLHttpRequest的封装，而fetch是一种新的获取资源的接口方式，并不是对XMLHttpRequest的封装。
它们最大的不同点在于Fetch是浏览器原生支持，而Axios需要引入Axios库。ajax需要引入Jquery

用法比较

axios

  axios({
    url: "http://baidu.com/",
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json;charset=UTF-8",
    },
    timeout: 4000,
    data: {
      a: 10,
      b: 20,
    },
  }).then((response) => {
    console.log(response);
  }).catch((error) => {
    console.log("请求异常");
  });

fetch

  fetch("http://baidu.com/", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json;charset=UTF-8",
    },
    body: JSON.stringify({
      a: 10,
      b: 20,
    })).then((response) => {
      console.log(response);
    }).catch((error) => {
      console.log("请求异常");
    });

ajax

  $.ajax({
    type: 'POST',
    url: "http://baidu.com/",
    data: {
      a: 10,
      b: 20,
    },
    success: function (response) {
      console.log(response);
    },
    error: function (error) {
      console.log("请求异常");
    }
  });

由上可以看出：最大的不同之处在于传递数据的方式不同，axios是放到data属性里，以对象的方式进行传递，而fetch则是需要放在body属性中，以字符串的方式进行传递。而ajax处理返回的是通过options中传入回调的方式。

返回数据处理

axios会自动对数据进行转化，而fetch则不同，它需要使用者进行手动转化。

  // axios
  axios.get("http://baidu.com/").then((response) => {
    console.log(response.data);
  });

  // fetch
  fetch("http://baidu.com/").then((response) =>{
    // 提供了多种转化方法
    /*
    * arrayBuffer()
      blob()
      json()
      text()
      formData()
    */
    response.json() // 需要对响应数据进行转换
  }).then((data) => {
    console.log(data);
  })

拦截器

拦截器是一个非常重要的功能，请求拦截，响应拦截。 axios 提供了成熟的拦截器。我们可以直接方便使用。

axios

  axios.interceptors.request.use((config) => {
    // 在请求之前对请求参数进行处理
    config.headers.Authorization = getToken() // 添加token
    return config;
  });

  axios.interceptors.response.use((response) => {
    // 统一异常处理
  })

而 fetch 没有这方面的技术支持。需要我们自己重写全局fetch。

fetch

  fetch = ((originalFetch) => {
    return (...arguments) => {
      const result = originalFetch.apply(this, arguments);
      return result.then(console.log("请求已发送"));
    };
  })(fetch);

在使用 jQuery 的项目中，如果要对所有的请求统一设置一些参数的话，可以设置拦截器 $.ajaxSetup，
$.ajaxSetup的参数和 $.ajax 的参数一样

  $.ajaxSetup({
    headers: {
      "token": getToken()
    }
});

由上可以看出 axios 还是更加完整好用。

并发

axios提供了并发支持。fetch和ajax没有,需要自己封装。

  axios.all([
    axios.get("https://test1.com"),
    axios.get("https://test2.com"),
  ]).then(
    axios.spread((res1, res2) => {
      // 分别处理
    })
  );

兼容性&浏览器原生支持

axios可以兼容IE浏览器，而fetch在IE浏览器和一些老版本浏览器上没有受到支持，但是有一个库可以让老版本浏览器支持Fetch即它就是whatwg-fetch，它可以让你在老版本的浏览器中也可以使用fetch，并且现在很多网站的开发都为了减少成本而选择不再兼容IE浏览器。
fetch受到浏览器原生支持。无需引入依赖包。这可能是fetch唯一的优势。

总结

fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。但是可以通过封装完成所有axios所有的功能。
ajax的使用需要引入庞大的Jquery。是阻拦它流行的最大原因。并且本身是针对MVC的编程,不符合现在前端MVVM的浪潮。势必会慢慢成为历史。
axios还是开箱即用。而且文档齐全。任然是现在最流行的网络请求技术。