有同学问我: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月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
101 2
|
25天前
|
XML 前端开发 JavaScript
webSocket 和 ajax 的区别
【10月更文挑战第26天】在实际开发中,需要根据具体的应用需求来选择合适的技术,以实现最佳的用户体验和系统性能。
|
21天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
37 1
|
2月前
|
XML 前端开发 JavaScript
详解Ajax与axios的区别
详解Ajax与axios的区别
|
2月前
|
前端开发 API 开发者
深度剖析:AJAX、Fetch API如何成为Python后端开发者的最佳拍档!
深度剖析:AJAX、Fetch API如何成为Python后端开发者的最佳拍档!
39 4
|
2月前
|
前端开发 JavaScript API
惊呆了!学会AJAX与Fetch API,你的Python Web项目瞬间高大上!
在Web开发领域,AJAX与Fetch API是提升交互体验的关键技术。AJAX(Asynchronous JavaScript and XML)作为异步通信的先驱,通过XMLHttpRequest对象实现了局部页面更新,提升了应用流畅度。Fetch API则以更现代、简洁的方式处理HTTP请求,基于Promises提供了丰富的功能。当与Python Web框架(如Django、Flask)结合时,这两者能显著增强应用的响应速度和用户体验,使项目更加高效、高大上。
51 2
|
2月前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
43 3
|
3月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
43 4
|
2月前
|
前端开发 API 数据格式
颠覆传统!AJAX、Fetch API与Python后端,开启Web开发新篇章!
在Web开发领域,技术的快速迭代推动着应用不断进化。传统前后端交互方式已无法满足现代Web应用对高效、实时性和用户体验的需求。AJAX作为异步通信的先驱,使页面无需刷新即可更新部分内容,显著提升用户体验;尽管XML曾是其主要数据格式,但如今JSON已成为主流。Fetch API则以其简洁、灵活的特点成为AJAX的现代替代品,基于Promises的异步请求让开发更加高效。与此同时,Python后端凭借高效稳定和丰富的库支持,成为众多开发者的首选,无论是轻量级的Flask还是全功能的Django,都能为Web应用提供强大的支撑。
40 0
|
2月前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
27 0