前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较
2024-09-02 20:10:35
一、ajax、fetch 和 axios 简介
1.1、ajax
ajax是最早出现发送后端请求的技术,属于原生 js 。ajax使用源码,请点击《原生 ajax 请求详解》查看。一般使用之前,我们都需要把它们封装使用,就以 jQuery 的 ajax 为例。
封装的 ajax 如下:
const $ = {};
$.ajax = (obj)=>{
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
xhr = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {}
}
}
if (xhr) {
xhr.onreadystatechange = () =>{
if (xhr.readyState === 4) {
if (xhr.status === 200) {
obj.success(xhr.responseText); //返回值传callback
} else {
//failcallback
obj.error('There was a problem with the request.');
}
} else {
console.log('still not ready...');
}
};
xhr.open(obj.method, obj.url, true);
// 设置 Content-Type 为 application/x-www-form-urlencoded
// 以表单的形式传递数据
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(util(obj.data));//处理body数据
}
//处理数据
const util = (obj)=>{
var str = ''
for (key in obj){
str += key +'='+obj[key]+'&'
}
return str.substring(0,str.length-1)
}
}
封装完成,开始使用的时候你会发现,body和header处理得有些乱,还有回调地狱的问题,所以我们出现了新的 fetch 请求技术。
1.2、fetch
fetch 首先解决了回调地狱的问题,他返回的结果是一个 Promise 对象,对 Promise 不熟的可点击《Promise详解》。
fetch 使用如下:
fetch(url,options).then(response=>{
// handle HTTP response
},error=>{
// handle network error
})
fetch 发送网络请求时,可以传输任意数据格式,非常简便。但是 fetch 的超时、终止取消并不方便,只能通过取消 Promise 来完成,如果有多个 fetch 请求时,更难处理。除此之外,fetch 是比较新的技术,低版本浏览器和IE浏览器支持性不好。
1.3、axios
axios 功能非常强大,包括 取消请求,超时处理,进度处理等等。但它的本质还是 ajax,基于 Promise 进行封装,既解决回调地狱问题,又能很好地支持各个浏览器。
axios使用代码如下:
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
二、ajax、fetch、axios的优缺点
2.1、ajax 的优缺点:
- 属 js 原生,基于XHR进行开发,XHR 结构不清晰。
- 针对 mvc 编程,由于近来vue和React的兴起,不符合mvvm前端开发流程。
- 单纯使用 ajax 封装,核心是使用 XMLHttpRequest 对象,使用较多并有先后顺序的话,容易产生回调地狱。
2.2、fetch 的优缺点:
- 属于原生 js,脱离了xhr ,号称可以替代 ajax技术。
- 基于 Promise 对象设计的,可以解决回调地狱问题。
- 提供了丰富的 API,使用结构简单。
- 默认不带cookie,使用时需要设置。
- 没有办法检测请求的进度,无法取消或超时处理。
- 返回结果是 Promise 对象,获取结果有多种方法,数据类型有对应的获取方法,封装时需要分别处理,易出错。
- 浏览器支持性比较差。
2.3、axios的优缺点:
- 在浏览器中创建XMLHttpRequest请求,在node.js中创建http请求。
- 解决回调地狱问题。
- 自动转化为json数据类型。
- 支持Promise技术,提供并发请求接口。
- 可以通过网络请求检测进度。
- 提供超时处理。
- 浏览器兼容性良好。
- 有拦截器,可以对请求和响应统一处理。
最新文章
- Linux下java进程CPU占用率高-分析方法
- struts2 Advanced Learning
- 直接拿来用!最火的Android开源项目(二)(转)
- JavaMail邮件开发
- 如何有效使用Project(1)——编制进度计划、保存基准
- JS验证 只能输入小数点,数字,负数。
- SQL Server 日期 时间类型
- JAVA学习-基础知识
- (转)在 Visual Studio 2010 中创建 ASP.Net Web Service
- 模块化与MVC
- Tomcat 配置成https协议
- BZOJ 1303 【CQOI2009】中位数图
- reflow和repaint区别?
- 笔记:Hibernate SQL 查询
- 【.NET Core项目实战-统一认证平台】第十章 授权篇-客户端授权
- JavaScript Node节点笔记
- SpringBoot启动源码探究---listeners.starting()
- mysql之 表数据存放路径非datadir目录
- SQL连接的分类
- Swagger2 添加HTTP head参数,解决用户是token信息保留
热门文章
- 小白学vue第四天,从入门到放弃(vue指令的使用加高阶函数)
- 【UGUI源码分析】Unity遮罩之Mask详细解读
- 字节跳动已经10万人了?渣本双非Android程序员怎么上车?
- 2020年!最全Android大厂面试真题合集(附答案)
- .Net Core+分布式配置中心(AgileConfig)
- AQS学习(一)自旋锁原理介绍(为什么AQS底层使用自旋锁队列?)
- Vue2.x响应式原理
- 一个遵循CleanArchitecture原则的Asp.net core轻量级开源项目
- cas5.3.1 从搭建到连接mysql(简而优美)
- DVWA(六):XSS-Reflected 反射型XSS全等级详解