前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较
一、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技术,提供并发请求接口。
- 可以通过网络请求检测进度。
- 提供超时处理。
- 浏览器兼容性良好。
- 有拦截器,可以对请求和响应统一处理。
前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较的更多相关文章
- 前后端数据交互(三)——ajax 封装及调用
有很多框架已经将 ajax 封装,需要的时候只需要调用就好,比如 jquery 是最常用的.我们为什么还需要学习 ajax 的封装呢?首先加强我们对ajax的认识,其次如果只是因为ajax请求需要引入 ...
- 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...
- 对GraphQL-BFF:微服务背景下的前后端数据交互方案的研究-------引用
随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...
- 前后端数据交互(八)——请求方法 GET 和 POST 区别
WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...
- 前后端数据交互处理基于原生JS模板引擎开发
json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...
- web前后端数据交互
前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...
- vue-resource的使用,前后端数据交互
vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载: https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...
- 前后端数据交互利器--Protobuf
Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...
- 前后端数据交互(二)——原生 ajax 请求详解
一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件 其他 j ...
随机推荐
- SQL Server存储过程执行一个带返回值(output)的存储过程
语法如下: --存储过程一CREATE PROCEDURE testProc @out VARCHAR(500) OUTPUT AS BEGIN SET @out='操作成功' RETURNEND - ...
- Java中泛型的详细解析,深入分析泛型的使用方式
泛型的基本概念 泛型: 参数化类型 参数: 定义方法时有形参 调用方法时传递实参 参数化类型: 将类型由原来的具体的类型参数化,类似方法中的变量参数 类型定义成参数形式, 可以称为类型形参 在使用或者 ...
- Java面向对象11——多态
多态 package oop.demon01.demon06; public class Application { public static void main(String[] a ...
- JavaGUI画笔工具的使用
JavaGUI画笔工具的使用 package GUI; import java.awt.*; public class TestPaint { public static void main(Stri ...
- Docker部署ELK之部署logstash7.6.0(4)
前言: logstash 和filebeat都具有日志收集功能,filebeat更轻量,占用资源更少,但logstash 具有filter功能,能过滤分析日志.一般结构都是filebeat采集日志,然 ...
- Install Fabric 1.8.3 Manually on Ubuntu 12.04
When you install Fabric with apt-get install fabric, you get a fabric with version 1.3.x, which is t ...
- Asp.Net Core 导入Excel数据到Sqlite数据库并重新导出到Excel
Asp.Net Core 导入Excel数据到Sqlite数据库并重新导出到Excel 在博文"在Asp.Net Core 使用 Sqlite 数据库"中创建了ASP.NET Co ...
- Upfile的几种常见姿势
记录一下文件上传的常见姿势,更全面的可以做upload-labs. 实验环境:win2003 phpstudy 实验平台:upfile 一.准备上传的一句话木马 eval函数将接受的字符串当做代码执行 ...
- 如何快速方便的生成好看的接口文档(apipost生成文档)
一键生成文档 我们在"2分钟玩转APIPOST"一讲中,简单介绍了如何生成并分享接口文档: 点击分享文档 复制并打开文档地址就可以看到了完整的接口文档. 本节课主要是讲解一些需要注 ...
- (一)Linux之目录结构
Linux之目录结构 目录 Linux之目录结构 一.概述 一.基本介绍 二.具体的目录结构(不用背,知道即可) Linux /usr目录 Linux /var 目录 一.概述 学习 Linux,不仅 ...