| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> 有同学问我:Fetch 和 Ajax 有什么区别? -> 正文阅读 |
|
[JavaScript知识库]有同学问我:Fetch 和 Ajax 有什么区别? |
前言Hello,大家好,我是编程三昧的作者隐逸王,小小前端一枚。 自昨天发了《还在死磕 Ajax?那可就 out 了!》一文后,收到了一些大家的一些评论,评论都很走心,也很有深度。 说实话,虽然我在尽可能努力地回复大家的问题,但还是避免不了对其中一些概念理解的模棱两可的情况,有幸得到同仁们的指点,比如: 感谢各位的不吝赐教,让我在成长的道路上又前进了几分。 现在总结一下,评论区涉及到的主要问题如下:
为了不辜负大家的热情,我在这里试着解释一下这些问题,如有疏漏,还请海涵! 概念和特性首先,我们来了解一下 Ajax、Axios 和 Fetch 它们各自的概念。 Ajax英文全称为 它是用来描述一种使用现有技术集合的“新”方法的,这里的“新”方法主要涉及到: HTML 或 XHTML、CSS、 JavaScript、DOM、XML、XSLT,以及最重要的 XMLHttpRequest。 当使用结合了这些技术的 AJAX 模型以后, 网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。
Ajax 最重要的特性就是可以局部刷新页面。 AxiosAxios 是一个基于 Promise 网络请求库,作用于 Node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和 Node.js中)。在服务端它使用原生 Node.js http 模块,而在客户端则使用 XMLHttpRequest。 这里我们只关注客户端的 Axios,它是基于 XHR 进行二次封装形成的工具库。 客户端 Axios 的主要特性有:
FetchFetch 提供了一个获取资源的接口(包括跨域请求)。 Fetch 是一个现代的概念, 等同于 XMLHttpRequest。它提供了许多与 XMLHttpRequest 相同的功能,但被设计成更具可扩展性和高效性。 Fetch 的核心在于对 HTTP 接口的抽象,包括 Request、Response、Headers 和 Body,以及用于初始化异步请求的 除此之外,Fetch 还利用到了请求的异步特性——它是基于 Promise 的。
Fetch 和 Axios/Ajax 的关系通过上面对三者概念的解释,我们应该大体清楚它们之间的关系了,我在这里用图表示一下: 针对上图,我解释一下:
Fetch 真的会取代 Ajax 吗?其实这个问题更准确的问法应该是:Fetch 真的会取代传统 Ajax ( XHR ) 吗? 要回答这个问题,我们需要清楚以下几点:
基于以上几点,我的观点是Fetch 终会取代传统 Ajax,但过程可能比较漫长。 虽然目前来看,传统 Ajax (比如 Axios 之类的)在使用规模上远远超过 Fetch,但要知道,这是 XHR 十来年累积下来的效果。 封装得到的 Axios 在易用性上甩了原生 XHR 十万八千里,但毕竟是封装的,和原生的 Fetch 相比较,Axios 在出身上就已略输一筹,且原生的 API 天然上会支持更多的功能,使用上会更加灵活。 Fetch 工具库推荐在昨天文章的评论区,有一位同学推荐了一个 Fetch 工具库,名为 Mande,有兴趣的同学可以去看看。 总结以上就是针对 Fetch 和 Ajax 问题的一份简单解释,希望能够给大家带来启发。 就我个人而言,倒是蛮期待 Fetch 能够取代传统 Ajax,技术的发展需要不断注入活力才行,我还能再干几十年,可不希望前端技术裹足不前,那样该多无聊 ! ~ ~本文完,感谢阅读! ~
|
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 | -2024/12/26 16:28:25- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |
数据统计 |