关于javascript:有同学问我Fetch-和-Ajax-有什么区别

江山代有人才出，各领风骚数百年。

前言

Hello，大家好，我是编程三昧的作者隐逸王，小小前端一枚。

自昨天发了《还在死磕 Ajax？那可就 out 了！》一文后，收到了一些大家的一些评论，评论都很走心，也很有深度。

说实话，尽管我在尽可能致力地回复大家的问题，但还是防止不了对其中一些概念了解的不置可否的状况，有幸失去同仁们的指导，比方：

感激各位的不吝赐教，让我在成长的路线上又后退了几分。

当初总结一下，评论区波及到的次要问题如下：

• Fetch 和 Axios/Ajax 是什么关系
• Fetch 真的会取代 Ajax 吗
• 有封装良好的 Fetch 工具库举荐吗

为了不辜负大家的激情，我在这里试着解释一下这些问题，如有疏漏，还请海涵！

概念和个性

首先，咱们来理解一下 Ajax、Axios 和 Fetch 它们各自的概念。

Ajax

英文全称为 Asynchronous JavaScript + XML，翻译过去就是 异步 JavaScript 和 XML。

它是用来形容一种应用现有技术汇合的“新”办法的，这里的“新”办法次要波及到: HTML 或 XHTML、CSS、JavaScript、DOM、XML、XSLT，以及最重要的 XMLHttpRequest。

当应用联合了这些技术的 AJAX 模型当前，网页利用可能疾速地将增量更新出现在用户界面上，而不须要重载（刷新）整个页面。这使得程序可能更快地回应用户的操作。

Ajax 是一个 概念模型 ，是一个囊括了泛滥现有技术的 汇合，并不具体代指某项技术。

Ajax 最重要的个性就是能够 部分刷新页面。

Axios

Axios 是一个基于 Promise 网络申请库，作用于 Node.js 和浏览器中。它是 isomorphic 的(即同一套代码能够运行在浏览器和 Node.js 中)。在服务端它应用原生 Node.js http 模块，而在客户端则应用 XMLHttpRequest。

这里咱们只关注客户端的 Axios，它是基于 XHR 进行二次封装造成的工具库。

客户端 Axios 的次要个性有：

• 从浏览器创立 XMLHttpRequests
• 反对 Promise API
• 拦挡申请和响应
• 转换申请和响应数据
• 勾销申请
• 主动转换 JSON 数据
• 客户端反对进攻 XSRF

Fetch

Fetch 提供了一个获取资源的接口（包含跨域申请）。

Fetch 是一个古代的概念, 等同于 XMLHttpRequest。它提供了许多与 XMLHttpRequest 雷同的性能，但被设计成 更具可扩展性和高效性。

Fetch 的外围在于 对 HTTP 接口的形象，包含 Request、Response、Headers 和 Body，以及用于初始化异步申请的 global fetch。得益于 JavaScript 实现的这些形象好的 HTTP 模块，其余接口可能很不便的应用这些性能。

除此之外，Fetch 还利用到了申请的异步个性——它是基于 Promise 的。

fetch() 办法必须承受一个参数——资源的门路。无论申请胜利与否，它都返回一个 Promise 对象，resolve 对应申请的 Response。

Fetch 和 Axios/Ajax 的关系

通过上面对三者概念的解释，咱们应该大体分明它们之间的关系了，我在这里用图示意一下：

针对上图，我解释一下：

• Ajax 是一种代表异步 JavaScript + XML 的模型（技术合集），所以 Fetch 也是 Ajax 的一个子集
• 在之前，咱们常说的 Ajax 默认是指以 XHR 为外围的技术合集，而在有了 Fetch 之后，Ajax 不再单单指 XHR 了，咱们将以 XHR 为外围的 Ajax 技术称作 传统 Ajax。
• Axios 属于传统 Ajax（XHR）的子集，因为它是基于 XHR 进行的封装。

Fetch 真的会取代 Ajax 吗？

其实这个问题更精确的问法应该是：Fetch 真的会取代传统 Ajax (XHR) 吗？

要答复这个问题，咱们须要分明以下几点：

• 异步编程是 JavaScript 倒退的大趋势，且绝大多数浏览器都已反对规范 Promise。
• Fetch API 是浏览器自带的 API，且它是基于规范 Promise 的。
• 传统 Ajax 原生写法构造比拟凌乱，不合乎关注拆散的准则，写过近程 XHR 的同学应该深有体会。
• Axios 是基于 XHR 封装的 Promise 申请库，用起来的确不便。

基于以上几点，我的观点是Fetch 终会取代传统 Ajax，但过程可能比拟漫长。

尽管目前来看，传统 Ajax（比方 Axios 之类的）在应用规模上远远超过 Fetch，但要晓得，这是 XHR 十来年累积下来的成果。

封装失去的 Axios 在易用性上甩了原生 XHR 十万八千里，但毕竟是封装的，和原生的 Fetch 相比拟，Axios 在出身上就已略输一筹，且原生的 API 人造上会反对更多的性能，应用上会更加灵便。

Fetch 工具库举荐

在昨天文章的评论区，有一位同学举荐了一个 Fetch 工具库，名为 Mande，有趣味的同学能够去看看。

总结

以上就是针对 Fetch 和 Ajax 问题的一份简略解释，心愿可能给大家带来启发。

就我集体而言，倒是蛮期待 Fetch 可能取代传统 Ajax，技术的倒退须要一直注入生机才行，我还能再干几十年，可不心愿前端技术裹足不前，那样该多无聊！

~

~ 本文完，感激浏览！

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！

你来，怀揣冀望，我有墨香相迎！你归，无论得失，唯以余韵相赠！

常识与技能并重，内力和外功兼修，实践和实际两手都要抓、两手都要硬！