Ajax 会被 fetch 取代吗？Axios 怎么办？

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

高级前端‬进阶

今天给大家带来的主题是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 被返回，有许多方法可以获取主体定义的内容以及添加额外处理。

图片来自：https://codeflarelimited.com/

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('https://example.com/answer', { answer: 42 })
  .then(data => {
    console.log(data); 
    // 由 data.json() 调用解析的 JSON 数据
  });
           

3.什么是Axios?

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

图片来自于：https://commons.wikimedia.org/

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

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

比如下面的Axios示例代码：

(async () => {
  try {
    const eightSecondsinMs = 8000;
    const url = `https://slow-api.onrender.com/api/mock-response-time/${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');
})();           

4.Fetch 和 Axios/Ajax 的关系?

上文对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 取代？”的问题。当然，至于结论，每个人有不同的看法，如果有不同意见欢迎在评论区留言。同时，文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。

参考资料

https://www.toutiao.com/article/7199882453425685032

https://juejin.cn/post/6997784981816737800

https://codeflarelimited.com/blog/working-with-fetch-api/

https://caniuse.com/?search=Fetch

https://commons.wikimedia.org/wiki/File:Axios_%28computer_library%29_logo.svg

https://codeflarelimited.com/blog/working-with-fetch-api/

https://segmentfault.com/a/1190000012836882