AJAX、Axios和Fetch的那些恩怨情仇

前言

前端这几年的高速发展，让人大叫真的学不动了。前后端交互方式也大大的升级了，现在经常用的三种交互方式，ajax、axios 和 fetch，他们之间的不同也常常是面试的重点，接下来我们就聊聊他们。

Ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术，俗称的局部刷新。

Ajax 的核心就是应用了 XMLHttpRequest 对象，通过这个对象，就可以实现在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

在运用原生 JS 时，对 AJAX 的封装往往使人头疼，在 Promise 还没出现的时代，回调函数一不小心就带你展现什么是地狱级别。

随着 Jquery 的出现，AJAX 也变的简单了起来，Jquery 内部封装了一个 AJAX。

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

Jquery 的 AJAX 是对原生 AJAX 的封装，使 AJAX 用起来更加的简单，并且支持 JSONP，已经将 AJAX 封装的很完美了，但是随着三大框架的出现，Jquery 慢慢的也退出了历史的舞台，想要用 Jquery 封装的 AJAX，必须引入体积庞大的 Jquery，这样很不利于项目的优化，此时 Axios 出现在了大众的视野。

Axios

Axios 是一个第三方提供的方法，它与 AJAX 一样，都是对 XMLHttpRequest 对象进行封装，并加入了 Promise 方法解决了回调地狱的问题，提供了可使用的大量的 API。

axios({
  method: "post",
  url: url,
  data: data,
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Axios 能被大量的使用，主要是拥有如下几个特点：

支持 node 端和浏览器端
支持 Promise
丰富的配置项
社区支持
客户端支持防止 CSRF

Fetch

Fetch 是对原生的 XMLHttpRequest 对象一个替代的方案，它更加底层，所以用起来也是更加的耐人寻味。

它同样是用 Promise 进行的封装，但是与 Axios 不同的是：

当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
fetch 不会发送 cookies。除非你使用了 credentials 的初始化选项。（自 2017 年 8 月 25 日以后，默认的 credentials 政策变更为 same-origin。）
fetch() 可以接受跨域 cookies；也可以使用 fetch() 建立起跨域会话。

fetch(url)
  .then(function (response) {
    return response.json();
  })
  .then(function (myJson) {
    console.log(myJson);
  });

Fetch 与 Axios 最大的不同，就是 Fetch 在第一次 then 返回的是一个 HTTP 响应，而不是真的 JSON。为了获取 JSON 的内容，我们需要使用 json() 方法。

三者比较还是觉得 Axios 更胜一筹。

后语

觉得还可以的，麻烦走的时候能给点个赞，大家一起学习和探讨！还可以关注我的博客希望能给我的github上点个Star，小伙伴们一定会发现一个问题，我的所有用户名几乎都与番茄有关，因为我真的很喜欢吃番茄❤️！！！想跟车不迷路的小伙还希望可以关注公众号 前端老番茄。关注后我拉你进前端进阶群，大家一起交流，一起学习，还可以获取免费的资料哦！！！我是一个编程界的小学生，您的鼓励是我不断前进的动力，😄希望能一起加油前进。