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

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

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

相关文章

C# 使用TCP创建HTTP客户程序

首先,创建一个控制台应用程序(包),向 Web 服务器发送一个 HTTP 请求。以前用 HttpClient 类实现了这个功能,但使用 TcpClient 类需要深入 HTTP 协议。HttpClientUsingTcp 示例代码使用了以下名称空间:System System.IO System.Net.Sockets …

Git之submodule使用总结

Git Submodule 可许可一个git仓库&#xff0c;作为另一个git仓库的子目录&#xff0c;保持父项目和子项目相互独立 1 添加仓库 git submodule add <仓库地址> <本地路径> 在父仓库根目录增加了.gitmodule文件 // 添加submodule字段 [submodule "submodule1&…

通读AFN①--从创建manager到数据解析完毕

流程梳理 今天开始会写几篇关于AFN源码解读的一些Blog&#xff0c;首先要梳理一下AFN的整体结构(主要是讨论2.x版本的Session访问模块)&#xff1a; 我们先看看我们最常用的一段代码&#xff1a; AFHTTPSessionManager *manager [AFHTTPSessionManager manager]; [manager GET…

学前教育试题库及答案_最新《学前教育学》专科-试题库及答案资料

精品文档精品文档学前教育学专科题库及答案一、单项选择题&#xff1a;(从下列各题备选答案中选出最适合的一个答案。共120题&#xff0c;每题1分)1——5DACBB 6——10DACDB 11——15ABDAC 16——20 BCDDC 21——25BBBCC26——30DCCAD 31——35DBBAB 36——40ACA…

python画4维图_用Python 画个六维图,涨姿势了

关注后你就是我的人了 我们的大脑通常最多能感知三维空间&#xff0c;超过三维就很难想象了。尽管是三维&#xff0c;理解起来也很费劲&#xff0c;所以大多数情况下都使用二维平面。来自维基百科 不过&#xff0c;我们仍然可以绘制出多维空间&#xff0c;今天就来用 Python 的…

[Windows]_[0基础]_[Release程序的崩溃报告minidump解决方式]

场景:1. Release的程序崩溃时&#xff0c;崩溃报告能够让开发者查明代码哪里出了问题&#xff0c;用处大大的。2. 仅仅实用VS的编译器才支持&#xff0c;所以MinGW就无缘了。3. 使用了未处理异常过滤处理函数.4. 生成的.dmp文件用zlib库压缩, 用到下面的ZipHelper类&#xff0c…

高考地理背熟这些知识可以拿80%的分数(1)

一、地理特征的描述 (一).区域自然地理特征的描述: 1、分析区域自然地理特征: 从地形、气候、水文、植被、河流、土壤、自然资源、自然灾害、自然(生态)环境等几方面入手。

CF Theatre Square

Theatre Square time limit per test2 secondsmemory limit per test64 megabytesinputstandard inputoutputstandard outputTheatre Square in the capital city of Berland has a rectangular shape with the size n  m meters. On the occasion of the citys anniversary,…

迅捷路由器 服务器无响应,如果路由器重启还是上不了网 几招搞定

如果网速很慢重启了路由器之后结果还是慢&#xff0c;而且甚至上不了网了那该怎么办。如果有这种情况原因其实有很多很多的可能&#xff0c;需要逐个排查&#xff0c;首先需要进入192.168.1.1路由器的管理设置界面&#xff0c;查看路由器的运行状态。路由器设置、路由器没有成功…

Azure DevOps 中 Dapr项目自动部署流程实践

注&#xff1a;本文中主要讨论 .NET6.0项目在 k8s 中运行的 Dapr 的持续集成流程, 但实际上不是Dapr的项目部署到K8s也是相同流程&#xff0c;只是k8s的yaml配置文件有所不同流程选择基于 Dapr 的项目持续集成包含以下流程编译并打包项目构建 Dockerfile,并推送镜像push image至…

matlab求kcf算法响应图_Kernelized Correlation Filters(KCF)算法

目前在online visual tracking这个领域&#xff0c;已经涌现出很多的跟踪算法&#xff0c;比较知名如TLD&#xff0c;Struck&#xff0c;OAB&#xff0c;CT等等。但是能做到非常快速而且效果还不错的相对就较少了&#xff0c;好多算法都是刚刚能实时&#xff0c;而且还是在图像…

React Native之js同步调用安卓原生方法@ReactMethod(isBlockingSynchronousMethod = true)

1 问题 之前的代码js调用安卓原生都是用的异步方法,比如callback, promiss,异步的话,我们一般是在安卓原生有耗时操作,才用异步,如果我要离开返回,就需要js调用安卓同步方法 利用callback实现js调用原生可以参考我的这篇博客 React Native实现js调用安卓原生代码 React Nat…

用POP动画引擎实现弹簧动画(POPSpringAnimation)

效果图: #import "ViewController.h" #import <POP.h>interface ViewController ()property (nonatomic, weak) UIView *testView;endimplementation ViewController- (void)viewDidLoad {[super viewDidLoad];self.view.backgroundColor [UIColor blackColor…

地理知识归纳:影响降水的九大因素

降水指大气中水汽凝结降落的过程,包括降雨、下雪、冰雹等形式,降水的多少要受很多因素的影响,但主要条件是三个:充足的水汽供应,气流上升达到过饱和状态,足够的凝结核。通常情况下,我们不需要考虑凝结核的问题,只是考虑有没有充足的水汽和促使气流上升的机制就可以,归…

linux 查看cpu_作为高级Java,你应该了解的Linux知识

作为一个javaer&#xff0c;我以前写过很多关于Linux的文章。但经过多年的观察&#xff0c;发现其实对于大部分人&#xff0c;有些东西压根就用不着。用的最多的&#xff0c;就是到线上排查个问题而已&#xff0c;这让人很是苦恼。那么&#xff0c;我们就将范围再缩小一下。最有…

uva-10305-水题-拓扑排序

uva-10305-水题-拓扑排序 输入n,m,n代表点数,m代表边数(i,j),排序时i在j前面,没出现的点随意排 #include <iostream> #include<stdio.h> #include<math.h> #include<memory.h> using namespace std;const int maxNum 120; int a, b; int map[maxNum][…

layer和3D仿射变换

1、视图的显示基于图层&#xff0c;通过控制图层同样能控制显示效果&#xff0c;获取当前的视图的layer,并为其增加圆角边框。 //设置layer边框的宽度为2view.layer.borderWidth2;//如果需要为layer添加颜色需要转换为CGColor对象view.layer.borderColor[UIColor greenColor].C…

服务器维修质保合同,服务器维护保修合同(标准版本).pdf

服务器维护保修合同甲 方 &#xff1a;乙 方 &#xff1a;。服务器维护保修合同甲 方&#xff1a;住 所&#xff1a;法定代表人&#xff1a;联 系 电 话 &#xff1a; 传 真&#xff1a;联 系 地 址 &#xff1a;邮 政 编 码 &#xff1a;乙 方&#xff1a;住 所&#xff1a;法…

React Native之Android原生通过DeviceEventEmitter发送消息给js

1 问题 Android原生向js发消息,并且可以携带数据 2 实现原理 Android原生可以使用RCTEventEmitter来注册事件,然后这里需要指定事件的名字,然后在js那端进行监听同样事件的名字监听,就可以收到消息得到数据 Android注册关键代码 reactContext.getJSModule(DeviceEventManag…

knex 单表查询_knex.js

软件简介knex.js 是一个查询构建器&#xff0c;用于 PostgreSQL, MySQL 和 SQLite3。它设计灵活&#xff0c;轻便和有趣。特性&#xff1a;例子&#xff1a;var knex require(knex)({dialect: sqlite3,connection: {filename: ./data.db}});// Create a tableknex.schema.crea…