ajax和axios、fetch的区别

1.jQuery ajax

$.ajax({type: 'POST',url: url,data: data,dataType: dataType,success: function () {},error: function () {}
});

传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。
JQuery ajax 是对原生XHR的封装,除此以外还增添了对JSONP的支持。经过多年的更新维护,真的已经是非常的方便了,优点无需多言;如果是硬要举出几个缺点,那可能只有:
1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.基于原生的XHR开发,XHR本身的架构不清晰。
3.JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
4.不符合关注分离(Separation of Concerns)的原则
5.配置和调用方式非常混乱,而且基于事件的异步模型不友好。
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller(MVC)模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离,极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的最重要一环。
如下图所示:
在这里插入图片描述
2.axios

axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'}
})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});

Vue2.0之后,尤雨溪推荐大家用axios替换JQuery ajax,想必让axios进入了很多人的目光中。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它本身具有以下特征:
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口(重要,方便了很多的操作)
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略。
3.fetch

try {let response = await fetch(url);let data = response.json();console.log(data);
} catch(e) {console.log("Oops, error", e);
}

fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。
fetch的优点:
1.符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
2.更好更方便的写法
坦白说,上面的理由对我来说完全没有什么说服力,因为不管是Jquery还是Axios都已经帮我们把xhr封装的足够好,使用起来也足够方便,为什么我们还要花费大力气去学习fetch?
我认为fetch的优势主要优势就是:

1.  语法简洁,更加语义化
2.  基于标准 Promise 实现,支持 async/await
3.  同构方便,使用 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4.更加底层,提供的API丰富(request, response)
5.脱离了XHR,是ES规范里新的实现方式

最近在使用fetch的时候,也遇到了不少的问题:
fetch是一个低层次的API,你可以把它考虑成原生的XHR,所以使用起来并不是那么舒服,需要进行封装。
例如:

1)fetch只对网络请求报错,对400,500都当做成功的请求,服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。
2)fetch默认不会带cookie,需要添加配置项: fetch(url, {credentials: 'include'})
3)fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费
4)fetch没有办法原生监测请求的进度,而XHR可以

总结:axios既提供了并发的封装,也没有fetch的各种问题,而且体积也较小,当之无愧现在最应该选用的请求的方式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249834.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

函数函数sigaction、signal

函数函数sigaction 1. 函数sigaction原型: int sigaction(int signum, const struct sigaction *act, struct sigaction *oldact); 分析: 参数 signum :要捕获的信号。参数act:truct sigaction 结构体,后面具体讲解传入…

使用SQL Server连接xml接口,读取并解析数据

--数据源格式&#xff0c;放到任意程序中部署接口即可--<Data xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd"http://www.w3.org/2001/XMLSchema"> --<Peoples> --<People> --<Name>张三</Name> --<S…

mac 卸载编辑器卸不干净

Configuration~/Library/Preferences/Caches~/Library/Caches/Plugins~/Library/Application Support/Logs~/Library/Logs/转载于:https://www.cnblogs.com/smzd/p/10114540.html

vue中使用axios最详细教程

前提条件&#xff1a;vue-cli 项目 安装&#xff1a; npm npm 在main.js导入&#xff1a; // 引入axios&#xff0c;并加到原型链中 import axios from axios; Vue.prototype.$axios axios; import QS from qs Vue.prototype.qs QS;封装好的axios,拿走不送&#xff1a;&am…

Java 类型转换String,List,Map,Array

1. JsonString转为Map String jsoNStr "{\n" "\t\"TestArray\": [\"1\", \"2\", \"3\"]\n" "}";Map map JSON.parseObject(jsoNStr,Map.class);2.Object转为JsonArray(得保证obj是个Array数组&#x…

关于固件

固件(Firmware)就是写入EROM或EPROM(可编程只读存储器)中的程序&#xff0c;通俗的理解就是“固化的软件”&#xff0c;台港澳称为“韧体”。更简单的说&#xff0c;固件就是BIOS的软件&#xff0c;但又与普通软件完全不同&#xff0c;它是固化在集成电路内部的程序代码&#x…

React-Native 指定模拟器RUN-IOS

react-native run-ios --simulator "iPhone 7” 转载于:https://www.cnblogs.com/smzd/p/10185263.html

vue和element-ui使用

上一篇已经创建好一个vue项目。https://mp.csdn.net/postedit/80926242 这一篇主要是创建一个vue项目并结合饿了么框架element-ui。 1.先创建vue项目&#xff0c;我准备把项目放在e盘下&#xff1a;E:\Work\RegisterProject&#xff1b; 命令行进入这个目录&#xff1a; 创…

javaweb学习6——自定义标签

声明&#xff1a;本文只是自学过程中&#xff0c;记录自己不会的知识点的摘要&#xff0c;如果想详细学习JavaWeb&#xff0c;请到孤傲苍狼博客学习&#xff0c;JavaWeb学习点此跳转 本文链接&#xff1a;https://www.cnblogs.com/xdp-gacl/p/3916946.html https://www.cnblogs…

goland 实用键

代码补全 option command v转载于:https://www.cnblogs.com/smzd/p/10313417.html

关于Mysql java.sql.SQLException: Access denied for user 'root'@'localhost' (using password: YES)的问题...

问题所在&#xff1a; 1.连接数据库一个是密码是否正确&#xff0c; 2.driver是否对&#xff0c; 3.有么有jar包冲突&#xff0c;转载于:https://www.cnblogs.com/java-123/p/9403412.html

vscode配置vue环境

一、安装VSCode、NodeJS VSCode&#xff1a;https://code.visualstudio.com/ NodeJS&#xff1a;https://nodejs.org/en/ 二、打开VSCode&#xff0c;安装常用插件 如图所示&#xff08;安装后重新加载即可&#xff09;: 三、项目中添加.vscode文件夹&#xff0c;文件夹中添…

秒杀核心设计(减库存部分)-防超卖与高并发

商品详情页面的静态化&#xff0c;varnish加速&#xff0c;秒杀商品库独立部署服务器这种就略过不讲了。只讨论库存部分的优化 mysql配置层面的优化可以参考我的这篇文章 《关于mysql innodb引擎性能优化的一点心得》 重点设计在数据库层面。 2张表&#xff1a; 第一张&#xf…

go strconv

strconv是golang用来做数据类型转换的一个库。 介绍下strconv最常用的两个方法, 没有解释语言那么自在可以str(int),int(string), 那还算简练。 num, err : strconv.Atoi("-42") str : strconv.Itoa(-42)转换换成bool类型. b, err : strconv.ParseBool("true&qu…

django配置templates、static、media和连接mysql数据库

1.模板文件 # templates配置 if os.path.exists(os.path.join(BASE_DIR, templates)) is False:os.mkdir(os.path.join(BASE_DIR, templates)) TEMPLATES [{# 模板引擎&#xff0c;内置的模板引擎有&#xff1a;# 1. django.template.backends.django.DjangoTemplates# 2. dj…

vue调用顺序(初学版) index.html → main.js → app.vue → index.js → components/组件 测试

关于它是怎么调用运作的&#xff1a;https://mp.csdn.net/postedit/86134414 一. 准备工作&#xff1a; 1.下载webstorm&#xff0c;安装vue。 2.创建项目&#xff0c;cd到要放项目的文件夹下 vue init webpack vue_test 3.安装各种包 npm install 4.运行 cd vue_test …

web开发:jquery之DOM

一、文档结构 二、文档操作 三、文档操作案例 四、form表单 五、正则 六、form案例 一、文档结构 jsvar $sup $(.sup);console.log($sup.children()); // 子们console.log($sup.parent()); // 父console.log($sup.prev()); // 上兄弟console.log($sup.next()); // 下兄弟c…

NO.8:自学python之路------并行socket网络编程

摘要 一到放假就杂事很多&#xff0c;这次的作业比较复杂&#xff0c;做了一个周&#xff0c;进度又拖了。不过结果还不错。 正文 粘包 在上一节中&#xff0c;如果连续发送过多数据&#xff0c;就可能发生粘包。粘包就是两次发送的数据粘在一起被接收&#xff0c;损坏了数据的…

vue项目中主要文件的加载顺序(index.html、App.vue、main.js)

先后顺序&#xff1a; index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的export外的js代码 测试的页面代码块&#xff1a; 文件的加载先后顺序&#xff1a; Index.vue的mounted()中的输出没有执行。why&#…

Http请求报头设置(C#)

1、添加一个SetHeaderValue方法&#xff1a; public static void SetHeaderValue(WebHeaderCollection header, string name, string value) { var property typeof(WebHeaderCollection).GetProperty("InnerCollection",BindingFlags.Instance | BindingFlags.NonP…