大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

高级前端‬进阶

今天给大家带来的主题是ajax、fetch、axios之争。话不多少，直接开始！

1.什么是Ajax？

Ajax表示Asynchronous JavaScript + XML（异步 JavaScript 和 XML）, 其本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括：HTML 或 XHTML, CSS, JavaScript, DOM, XML (en-US), XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的 AJAX 模型以后，网页应用能够快速地将增量更新呈现在用户界面上，而不需要刷新整个页面。这使得程序能够更快地响应用户的操作。

什么是Ajax？

尽管 X 在 Ajax 中代表 XML，但由于JSON的诸多优势，比如更加轻量以及作为 Javascript 的一部分，目前 JSON 的使用比 XML 更加普遍。比如下面的Ajax请求示例：

// 创建 XHR 对象 var xhttp = new XMLHttpRequest()// 一旦我们得到服务器响应，将其设置在我们的 HTML DOM 中xhttp.onreadystatechange = function() {    if(this.readyState == 4 && this.status == 200){        document.getElementById('demo').innerHTML = this.responseText    }}//服务器发送的响应可以是：responseText 或 responseXML // 只有 demo div 会被刷新//xhttp.open('mode of file (GET/POST)', 'file name' async mode)xhttp.open('GET', 'filename.txt', true)//向服务器发送请求xhttp.send()

注意：Ajax 是一个概念，囊括了众多现有技术，并不具体代指某项技术。

因此，从概念来看，Ajax 最重要的特性就是可以局部刷新页面。

2.什么是Fetch？

fetch() 强制接受一个参数，即要获取的资源的路径。它返回一个 Promise，该 Promise 会在服务器使用标头响应后，返回该请求的 Response，即使服务器的响应是 HTTP 错误状态。一旦 Response 被返回，有许多方法可以获取主体定义的内容以及添加额外处理。

图片来自：

Fetch与XMLHttpRequest类似，允许发出AJAX请求。区别在于Fetch使用Promise方式，是一种更加简洁的API，比XMLHttpRequest更加简单易用、具有较高的可扩展性、高效性。

Fetch 的核心在于对 HTTP 接口的抽象，包括 Request、Response、Headers 和 Body，以及用于初始化异步请求的 global fetch。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能。

注意：fetch() 方法必须有请求资源的路径参数。而且无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的 Response。

比如下面的fetch示例代码：

// 使用fetch的post示例async function postData(url = '', data = {}) {  // 默认配置通过 * 标记  const response = await fetch(url, {    method: 'POST',     // 支持 *GET, POST, PUT, DELETE, etc.    mode: 'cors',     // 支持 no-cors, *cors, same-origin    cache: 'no-cache',     //支持 *default, no-cache, reload, force-cache, only-if-cached    credentials: 'same-origin',     // 支持 include, *same-origin, omit    headers: {      'Content-Type': 'application/json'      // 支持'Content-Type': 'application/x-www-form-urlencoded',    },    redirect: 'follow',     // 支持 manual, *follow, error    referrerPolicy: 'no-referrer',     //支持 no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url    body: JSON.stringify(data)     // 正文数据类型必须匹配“Content-Type”标题  });  return response.json();   // 将 JSON 响应解析为原生 JavaScript 对象}postData(';, { answer: 42 })  .then(data => {    console.log(data);     // 由 data.json() 调用解析的 JSON 数据  });

Axios是一个基于promise 的网络请求库，作用于node.js和浏览器环境中，它是 isomorphic 的（即同一套代码可以运行在浏览器和node.js中）。在服务端它使用原生node.js http模块, 而在客户端 （浏览端） 则使用XMLHttpRequest。

图片来自于：

下文主要关注浏览器端的 Axios实现，它是基于 XHR 进行二次封装形成的工具库。浏览器端的 Axios 的主要特性有：

从浏览器创建 XMLHttpRequests支持 Promise API、请求和响应拦截转换请求和响应数据、取消请求自动转换JSON数据、支持XSRF

比如下面的Axios示例代码：

(async () => {  try {    const eightSecondsinMs = 8000;    const url = `{eightSecondsinMs}`;    console.log(`Sending a GET reqeust to: ${url}`);    const response = await axios.get(url, {timeout: 900});    // 设置timeout    console.log(`Response: `, response?.data?.message );    console.log('do this after you have data');  } catch(err) {    console.log(`Error message : ${err.message} - `, err.code);  }  console.log('do the next task');})();

上文对fetch、axios、ajax三者的概念、使用示例做了一个简单的说明。三者的关系可以通过下面的图来表示。

Fetch 和 Axios/Ajax 的关系

上图的关系可以总结为以下三个核心点：

Ajax 代表异步JavaScript +XML，它是新方法而不是单指某一种技术，所以 Fetch 本质上是 Ajax 的子集传统的Ajax默认是指以 XHR 为核心的技术集合，有了 Fetch 之后，Ajax 不再单独表示 XHR ，即不再单指某一种技术。Axios 属于传统 Ajax（XHR）的子集，因为它是对传统 XHR 的封装，至少浏览器端是这样。5.Fetch 真的会取代传统 Ajax（XHR） 吗？

异步编程是 JavaScript 的大趋势，而且绝大多数浏览器都已原生支持 Promise，即使不支持也可以通过polyfill轻松实现。而Fetch API 是浏览器的原生实现，其本身就是基于 Promise的

Promise浏览器支持情况

Fetch浏览器支持情况

传统 Ajax 写法混乱，不符合关注分离的原则相比。Axios 是基于 XHR 封装的 Promise 请求库，用起来确实方便。但是，我依然认为：Fetch终将会取代传统 Ajax！

诚然，Axios的存在一方面使得开发者不用考虑浏览器兼容性，而且API更加简单、易用！但是，随着用户端浏览器的更新迭代，fetch终将会是主流，这可能也是浏览器厂商为什么坚持引入fetch的原因。同时，与传统的XHR相比，fetch在能力上会更强，通过Axios封装的能力都可以通过fetch轻松实现！

所以，我宁愿相信Axios只是一个过渡，而fetch才是终态！

6.总结

本文主要和大家介绍下ajax、fetch、axios的关系。同时回答下“ajax 真的会被 fetch 取代？”的问题。当然，至于结论，每个人有不同的看法，如果有不同意见欢迎在评论区留言。同时，文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。

参考资料