ajax速度axio速度,[转]Ajax Fetch Axios之间的详细区别以及优缺点
jQuery ajax1
2
3
4
5
6
7
8$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function (){},
error: function (){}
})
优缺点:
本身是针对mvc模式的编程,不符合现在mvvm的浪潮
基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
尽管JQuery对我们前端的开发工作曾有着(现在也仍然有着)深远的影响,但是我们可以看到随着VUE,REACT新一代框架的兴起,以及ES规范的完善,更多API的更新,JQuery这种大而全的JS库,未来的路会越走越窄。
axios1
2
3
4
5
6
7
8
9
10
11axios({
method: 'POST',
url: ''
data:{
name:'zhang'
}
}).then(function (response){
console.log(response)
}).then(function (error){
console.log(error)
})
Vue2.0之后,尤雨溪推荐大家用axios替换JQuery ajax,想必让Axios进入了很多人的目光中。Axios本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,从它的官网上可以看到它有以下几条特性:
优缺点:
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口(重要,方便了很多的操作)
这个支持防止CSRF其实挺好玩的,是怎么做到的呢,就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略。
Axios既提供了并发的封装,也没有下文会提到的fetch的各种问题,而且体积也较小,当之无愧现在最应该选用的请求的方式。
fetch
fetch号称是AJAX的替代品,它的好处在《传统 Ajax 已死,Fetch 永生》中提到有以下几点:
符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
更好更方便的写法,诸如:
1
2
3
4
5
6
7try{
let response = await fetch(url);
let data = response.json();
console.log(data);
}catch (e){
console.log("Oops, error", e);
}
脱离了XHR,是ES规范里新的实现方式
1)fetchtch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
2)fetch默认不会带cookie,需要添加配置项
3)fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了量的浪费
4)fetch没有办法原生监测请求的进度,而XHR可以
看到这里,你心里一定有个疑问,这鬼东西就是个半拉子工程嘛,我还是回去用Jquery或者Axios算了——其实我就是这么打算的。但是,必须要提出的是,我发现fetch在前端的应用上有一项xhr怎么也比不上的能力:跨域的处理。
我们都知道因为同源策略的问题,浏览器的请求是可能随便跨域的——一定要有跨域头或者借助JSONP,但是,fetch中可以设置mode为no-cors(不跨域),如下所示:
1
2
3
4
5fetch('/users.json', {
method: 'post',
mode: 'no-cors',
data: {}
}).then(function(){ /* handle response */ });
为什么要用axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止CSRF/XSRF
ajax速度axio速度,[转]Ajax Fetch Axios之间的详细区别以及优缺点相关推荐
- ajax与axios使用哪个好,ajax、axios、fetch之间的详细区别以及优缺点
将jQuery的ajax.axios和fetch作个简单的比较,所谓仁者见仁智者见智,最终使用哪一个仍是自行斟酌javascript 1.jQuery ajax 前端 $.ajax({ type: ' ...
- Ajax请求,JQuery发送请求,Axios请求,Fetch请求总结
常见的请求方式 1.Ajax请求 定义: 同步与异步的区别: Ajax的工作原理: 实现AJAX的基本步骤: Get请求: Post请求: 2.JQuery发送请求 Get请求: Post请求: 3. ...
- js 单页面ajax缓存策略,浅谈ajax的缓存机制---IE浏览器方面
这篇文章主要介绍了IE浏览器关于ajax的缓存机制,文中给大家提到了Ajax解决浏览器的缓存问题,解决方法有很多种.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. IE浏览器对于同一 ...
- ajax要不要入口函数,Ajax - SegmentFault 思否
** Ajax 技术应用 1.Ajax 简介 1.1Ajax 是什么? Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(java ...
- 【AJAX是什么】【AJAX的基本使用】
文章目录 AJAX学习 前言 1.AJAX概述 2.AJAX快速入门 3.AJAX的相关API 4.Axios的快速入门 结语 AJAX学习 前言 本文主要对AJAX进行一个粗略的学习,大致了解了AJ ...
- AJAX(看这一篇就够了,详细)
看这一篇就够了!-Ajax概念详解 AJAX简介: AJAX即Asynchronous JavaScript and XML(异步JavaScript和XML技术),是一种在无须重新加载整个网页的情况 ...
- vue使用ajax提交数据,vue使用ajax请求后台数据的方法
vue使用ajax请求后台数据的方法 发布时间:2020-10-15 16:54:41 来源:亿速云 阅读:108 作者:栢白 这篇文章主要介绍了vue使用ajax请求后台数据的方法,具有一定借鉴价值 ...
- ajax php计数,jQuery+PHP+Ajax动态数字统计展示实例
jQuery+PHP+Ajax实现的一款动态数字统计展示实例,本例是在页面上动态展示了当前在线用户数,当然了,你可以应用到其他更多场景中. 首先我们在#number放置要统计的数字: 当前在线: - ...
- c 中ajax不起作用,Jquery AJAX調用:$(this)在成功后不起作用
I am wondering why $(this) does not work after a jQuery ajax call. 我想知道為什么$(this)在jQuery ajax調用之后不起作 ...
最新文章
- 转载:linux环境下搭建discuz论坛
- 2017-5-4 进程
- c++的虚拟继承 的一些思考吧
- 平均年薪30万的深度学习算法工程师,正面临100万的人才缺口
- 老款诺基亚java都市恋爱养成,被“10年前的手机”刷屏了?都是青春和故事啊
- 禁止i5笔记本按Ctrl+Alt+向下键翻转屏幕
- 今天突然出现了Property IsLocked is not available for Login '[sa]',我太阳,下面有绝招对付它!...
- 骆驼壳修改服务器,【电视直播】发烧友TV,骆驼壳导入直播源教程,打造个人专属永久盒子软件,你们想看的这都有!...
- apache创建虚拟主机
- matlab保存m文件是什么意思,在Matlab中怎样把一个程序保存为一个.m文件
- 单模光纤和多模光纤的对比
- 后台推送消息给app_小米加入统一推送联盟!避免多种APP后台运行,国产手机春天来了...
- HDU - 4598 Difference
- 游戏中符文系统与天赋系统等的作用
- 财经365零基础学投资:用江恩展望下半年股市
- 苹果审核规则研究,实时更新
- VSTO中Word的查找方式
- winbugs Blackbox trap #060问题解决方法
- 结对编程——经验教训总结
- GhostNet: More Features from Cheap Operations
热门文章
- BeetleX自定义http/websocket压测用例视频
- TIOBE 8 月榜单:C 力压 Java 夺得第一,Java掉了1.6 个点
- .NET Core Web APi大文件分片上传研究
- Vue 3拖更,尤雨溪介绍最新进展
- 简单说说async/await
- OpenSilver: 通过WebAssembly 复活Silverlight
- 新款 Azure .NET SDK 如何设定 Content-Type
- .NET Core实战项目之CMS 第十七章 CMS网站系统的部署
- 确认过眼神,你是ApacheWay的人 | COSCon‘18 特辑
- ASP.NET Core 2.1中基于角色的授权