axios ajax fetch 区别以及优缺点
将jQuery的ajax、axios和fetch做个简单的比较,所谓仁者见仁智者见智,最终使用哪个还是自行斟酌
1.jQuery ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
});
优缺点:
- 本身是针对MVC的编程,不符合现在前端MVVM的浪潮
- 基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
- JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)
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);
});
优缺点:
- 从 node.js 创建 http 请求
- 支持 Promise API
- 客户端支持防止CSRF
- 提供了一些并发请求的接口(重要,方便了很多的操作)
3.fetch
try {
let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
优缺点:
- 符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
- 更好更方便的写法
- 更加底层,提供的API丰富(request, response)
- 脱离了XHR,是ES规范里新的实现方式
- 1)fetchtch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
- 2)fetch默认不会带cookie,需要添加配置项
- 3)fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了量的浪费
- 4)fetch没有办法原生监测请求的进度,而XHR可以
为什么要用axios?
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止CSRF/XSRF
axios ajax fetch 区别以及优缺点的更多相关文章
- ajax、axios、fetch区别及优缺点
将jQuery的ajax.axios和fetch做个简单的比较,所谓仁者见仁智者见智,最终使用哪个还是自行斟酌 1.jQuery ajax $.ajax({ type: 'POST', url: ur ...
- axios ajax fetch 区别
请求方式千千万,axios是一种对ajax的封装,fetch是一种浏览器原生实现的请求方式,跟ajax对等
- axios与ajax的区别及优缺点
区别:axios是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封装一样,简单来说就是ajax技术实现了局部数据的刷新,axios实现了对ajax的封装,axios有的a ...
- axios和fetch区别对比
axios axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' ...
- Jquery ajax, Axios, Fetch区别
1. Jquery ajax, Axios, Fetch区别之我见 2. ajax.axios.fetch之间的详细区别以及优缺点
- Jquery ajax, Axios, Fetch区别之我见(转载)
来源:https://segmentfault.com/a/1190000012836882 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被 ...
- vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别
先说一下对比吧 Jquery ajax, Axios, Fetch区别之我见 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1 ...
- 异步请求xhr、ajax、axios与fetch的区别比较
目录 1. XMLHttpRequest对象 2. jQuery ajax 3. axios 4. fetch 参考 why: 为什么会出现不同的方法呢? what: 这些都是异步请求数据的方法.在不 ...
- react中使用Ajax请求(axios,Fetch)
React本身只关注于界面, 并不包含发送ajax请求的代码,前端应用需要通过ajax请求与后台进行交互(json数据),可以使用集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery ...
随机推荐
- Two pointer方法
I.何为Two pointer 用两个哨兵指向两个序列,通过利用序列本身的性质减少遍历次数,来更快得解决一些归并问题 基本问题 给定一个正整数递增序列和一个正整数M,求序列中两个不同位置的a,b使得a ...
- Swoole 中使用 TCP 异步服务器、TCP 协程服务器、TCP 同步客户端、TCP 协程客户端
TCP 异步风格服务器 异步风格服务器通过监听事件的方式来编写程序.当对应的事件发生时底层会主动回调指定的函数. 由于默认开启协程化,在回调函数内部会自动创建协程,遇到 IO 会产生协程调度,异步风格 ...
- mysql语句2-单表查询
mysql 查询以及多表查询 以下所有表格样例都采用下边这个表格 mysql> select * from benet; +------+------+----------+ | id | ...
- 学习Java爬虫文档的学习顺序整理
1.认识正则表达式(Java语言基础) https://www.toutiao.com/i6796233686455943693/ 2.正则表达式学习之简单手机号和邮箱练习 https://www.t ...
- Centos安装DenyHosts
一.背景 个人申请的腾讯云主机被扫描端口,数百次登录失败的尝试 解决方法:安装工具,记录并屏蔽恶意访问. 二.检查环境 系统安装的sshd是否支持tcp_wrappers(默认都支持) ldd /us ...
- Flutter 2022 产品路线图发布
为了提升产品的透明性,每年年初 Flutter 团队都会发布今年度的产品路线图,以帮助使用 Flutter 的团队和开发者们根据这些优先事项制定计划. 2022 年 Flutter 团队将重点通过关注 ...
- 【Java】GUI实现贪吃蛇
[Java]GUI实现贪吃蛇 前言 我们在做这个小游戏之前,得确保自己的AWT和Swing有一定的基础,并且会写一些简单的逻辑操作.这些都会在后面写的时候体现出来. 狂神老师从这里开始讲贪吃蛇的 我们 ...
- 【分享】thanos receiver的grafana报表配置
具体的部署是:用prometheus抓取thanos receiver的10909端口,然后grafana再请求这个prometheus 具体的JSON配置请见最后 本文的一些监控配置,参考了这篇文章 ...
- 【记录一个问题】用毫无用处的方法解决了libtask的asm.S在ndk下编译的问题
昨天提到,libtask中的asm.S使用的是ARM 32位的语法,因此在ARM 64下无法编译通过. 于是查了一下资料,改写了一下汇编代码,使得可以在64位下编译通过.源码如下 #if define ...
- dubbo系列十一、dubbo transport层记录
前言 在dubbo接口方法重载且入参未显式指定序列化id导致ClassCastException分析时候用到了dubbo的通信层和编解码,dubbo有个transport层,默认使用netty4进行网 ...