有同学问我:Fetch 和 Ajax 有什么区别?

简介: 江山代有人才出,各领风骚数百年。

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


6.png


前言


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


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


说实话,虽然我在尽可能努力地回复大家的问题,但还是避免不了对其中一些概念理解的模棱两可的情况,有幸得到同仁们的指点,比如:


5.png


感谢各位的不吝赐教,让我在成长的道路上又前进了几分。


现在总结一下,评论区涉及到的主要问题如下:


  • 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 的关系


通过上面对三者概念的解释,我们应该大体清楚它们之间的关系了,我在这里用图表示一下:


4.png


针对上图,我解释一下:


  • 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 工具库推荐


3.png


在昨天文章的评论区,有一位同学推荐了一个 Fetch 工具库,名为 Mande,有兴趣的同学可以去看看。


2.png


总结


以上就是针对 Fetch 和 Ajax 问题的一份简单解释,希望能够给大家带来启发。


就我个人而言,倒是蛮期待 Fetch 能够取代传统 Ajax,技术的发展需要不断注入活力才行,我还能再干几十年,可不希望前端技术裹足不前,那样该多无聊 !


~本文完,感谢阅读!


学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!


你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!


知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!




相关文章
|
3月前
|
负载均衡 前端开发 搜索推荐
Axios 和 Ajax 的区别
Axios 和 Ajax 的区别
|
4天前
|
XML 前端开发 JavaScript
Ajax、Fetch、Axios
Ajax、Fetch、Axios
48 25
|
5天前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
15 0
|
1月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
|
1月前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
【7月更文挑战第15天】AJAX和Fetch API是Web开发中的关键工具,用于异步前后端交互。AJAX借助XMLHttpRequest实现页面局部更新,而Fetch API是现代的、基于Promise的HTTP请求接口,提供更强大功能和简洁语法。结合Python Web框架如Django或Flask,利用这两者能创造无缝体验,提升项目性能和用户体验。学习并应用这些技术,将使你的Web应用焕发新生。**
39 5
|
1月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
【7月更文挑战第15天】Python后端(Django/Flask)与前端通过AJAX或Fetch API实现异步交互,提升Web应用体验。Python提供强大的后端支持,AJAX用于不刷新页面的数据交换,Fetch API作为现代标准,基于Promise简化HTTP请求。结合两者,构建高效、流畅的交互系统,优化响应速度和用户体验,开启Web开发新篇章。
37 5
|
1月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
44 7
|
1月前
|
前端开发 JavaScript API
告别繁琐!AJAX与Fetch API,让你的前后端沟通畅通无阻,项目效率飙升!
【7月更文挑战第15天】AJAX与Fetch API革新了前后端通信,实现页面局部更新,提高用户体验。AJAX利用XMLHttpRequest异步交互,Fetch API则基于Promises,语法简洁。两者均简化了HTTP请求处理,加速项目开发。通过示例代码展示了如何使用它们进行数据请求与响应处理。拥抱这些技术,让Web应用更流畅,开发更高效!
23 2
|
1月前
|
前端开发 JavaScript API
惊天揭秘!AJAX与Fetch API如何让你的前后端交互秒变‘神级操作’!
【7月更文挑战第15天】在Web开发中,AJAX和Fetch API革新了前后端交互,告别了表单提交带来的页面刷新。AJAX利用XMLHttpRequest实现部分页面更新,开启无刷新时代;Fetch API作为现代替代,以其简洁和Promise支持简化异步操作。从AJAX的先驱地位到Fetch API的进化,两者提升了Web应用的性能和用户体验,成为现代开发的必备技能。
29 2
|
1月前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
【7月更文挑战第13天】构建现代Web应用的关键在于提供无缝用户体验,这涉及AJAX和Fetch API的异步数据交换以及Python(如Flask)的后端支持。Fetch API以其基于Promise的简洁接口,改进了AJAX的复杂性。例如,一个Flask应用可提供用户数据,前端利用Fetch API在不刷新页面的情况下显示信息。这种结合提升了效率,减少了服务器负载,是现代Web开发的趋势。随着技术发展,预期将有更多工具优化这一过程。
47 3