axios jquery.ajax fetch 区别

最近项目在用 axios，好像出现好久了，才开始学习。

这三个都是发起 http 请求的东西,都算是对原生 XHR 的封装。从 XHR -> Jquery ajax() -> fetch -> axios
现在来分别看一下这三个东西

• Jquery ajax
  它是对原生 XHR 的封装，支持 JsonP，是 MVC 编程的一种请求方式，已经逐渐的不适应前端的 MVVM 框架的潮流了。
  而且，在项目中使用的时候，要使用 ajax，就得把 jquery 都引进来，很冗余。

$.ajax({
  type: "POST",
  url: url,
  data: data,
  dataType: dataType,
  success: function() {},
  error: function() {}
});

• fetch

fetch 是一个出现比较久的，但是依旧有好多不兼容的 ajax 的替代品。
采用了 es 的 promise。
fetch 不会默认的传 cookies，需要添加配置项credentials: 'include'
fetch 只会对网络请求错误报错，400，500 等问题会进入 then，而不会进入 catch。
fetch 不支持超时的问题。
fetch 不能监听请求的进度，而 XHR 可以。

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

• axios 是一个很高档的东西。它不仅支持浏览器的数据请求，还支持 node 创建 http 请求。
  它和 fetch 一样，也是基于 Promise 的 API，能够从客户端支持防止 CSRF，提供了很多接口，可以并发等。

axios({
  method: "GET",
  url: url
})
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  });