江山代有人才出,各领风骚数百年。 前言 Hello,大家好,我是编程三昧的作者隐逸王,小小前端一枚。 自昨天发了《还在死磕Ajax?那可就out了!》一文后,收到了一些大家的一些评论,评论都很走心,也很有深度。 说实话,虽然我在尽可能努力地回复大家的问题,但还是避免不了对其中一些概念理解的模棱两可的情况,有幸得到同仁们的指点,比如: 感谢各位的不吝赐教,让我在成长的道路上又前进了几分。 现在总结一下,评论区涉及到的主要问题如下:Fetch和AxiosAjax是什么关系Fetch真的会取代Ajax吗有封装良好的Fetch工具库推荐吗 为了不辜负大家的热情,我在这里试着解释一下这些问题,如有疏漏,还请海涵!概念和特性 首先,我们来了解一下Ajax、Axios和Fetch它们各自的概念。Ajax 英文全称为AsynchronousJavaScriptXML,翻译过来就是异步JavaScript和XML。 它是用来描述一种使用现有技术集合的新方法的,这里的新方法主要涉及到:HTML或XHTML、CSS、JavaScript、DOM、XML、XSLT,以及最重要的XMLHttpRequest。 当使用结合了这些技术的AJAX模型以后,网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。 Ajax是一个概念模型,是一个囊括了众多现有技术的集合,并不具体代指某项技术。 Ajax最重要的特性就是可以局部刷新页面。Axios Axios是一个基于Promise网络请求库,作用于Node。js和浏览器中。它是isomorphic的(即同一套代码可以运行在浏览器和Node。js中)。在服务端它使用原生Node。jshttp模块,而在客户端则使用XMLHttpRequest。 这里我们只关注客户端的Axios,它是基于XHR进行二次封装形成的工具库。 客户端Axios的主要特性有:从浏览器创建XMLHttpRequests支持PromiseAPI拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防御XSRFFetch Fetch提供了一个获取资源的接口(包括跨域请求)。 Fetch是一个现代的概念,等同于XMLHttpRequest。它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性。 Fetch的核心在于对HTTP接口的抽象,包括Request、Response、Headers和Body,以及用于初始化异步请求的globalfetch。得益于JavaScript实现的这些抽象好的HTTP模块,其他接口能够很方便的使用这些功能。 除此之外,Fetch还利用到了请求的异步特性它是基于Promise的。 fetch()方法必须接受一个参数资源的路径。无论请求成功与否,它都返回一个Promise对象,resolve对应请求的Response。Fetch和AxiosAjax的关系 通过上面对三者概念的解释,我们应该大体清楚它们之间的关系了,我在这里用图表示一下: 针对上图,我解释一下:Ajax是一种代表异步JavaScriptXML的模型(技术合集),所以Fetch也是Ajax的一个子集在之前,我们常说的Ajax默认是指以XHR为核心的技术合集,而在有了Fetch之后,Ajax不再单单指XHR了,我们将以XHR为核心的Ajax技术称作传统Ajax。Axios属于传统Ajax(XHR)的子集,因为它是基于XHR进行的封装。Fetch真的会取代Ajax吗? 其实这个问题更准确的问法应该是:Fetch真的会取代传统Ajax(XHR)吗? 要回答这个问题,我们需要清楚以下几点:异步编程是JavaScript发展的大趋势,且绝大多数浏览器都已支持标准Promise。FetchAPI是浏览器自带的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,技术的发展需要不断注入活力才行,我还能再干几十年,可不希望前端技术裹足不前,那样该多无聊! 本文完,感谢阅读! 学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂! 大家好,我是编程三昧的作者隐逸王,我的公众号是编程三昧,欢迎关注,希望大家多多指教! 你来,怀揣期望,我有墨香相迎!你归,无论得失,唯以余韵相赠! 知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!