vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作


Posted in Javascript onNovember 09, 2020

我就废话不多说了,大家还是直接看代码吧~

Axios.all([request1, request2, request3])
   .then(
    Axios.spread((area, acct, perms) => {
   console.log('全部加载完成')
 
    })
   )
   .catch(err => {
    console.log(err.response)
   });

需要在当前路由引入axios

import Axios from "axios";

补充知识:vue,axios处理同一个接口多次访问的执行顺序问题

碰到个问题记录一下,就是axios同时多次请求同一个接口(参数不同)导致数据混乱的问题,就是先点击A,马上再点击B,结果A请求数据的速度比B的慢,导致,展示数据的时候B的结果先出来,又马上闪成A请求的数据了。这里有一种解决办法,在点击新的接口请求时,关闭之前正在pending的接口请求。

vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作

在已经封装好的axios方法里面,加上红框中代码,然后再在你需要的vue文件方法里面加上如下代码

vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作

vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作

这样你每点击一个事件触发新的请求时,之前仍在pending的请求就会被强制关闭了

以上这篇vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 实用的文字链提示框效果
Jun 30 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
简单的JS轮播图代码
Jul 18 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
js实现自定义右键菜单
May 18 Javascript
JavaScript函数柯里化
Nov 07 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 #Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 #Javascript
Vue路由权限控制解析
Nov 09 #Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 #Javascript
vue 中的动态传参和query传参操作
Nov 09 #Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 #Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 #Javascript
You might like
页面乱码问题的根源及其分析
2013/08/09 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
仿淘宝JSsearch搜索下拉深度用法
2018/01/15 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
原生JS实现留言板
2020/03/26 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
Python3 replace()函数使用方法
2018/03/19 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
python 将md5转为16字节的方法
2018/05/29 Python
python制作简单五子棋游戏
2019/06/18 Python
python实现邮件发送功能
2019/08/10 Python
python多线程分块读取文件
2019/08/29 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
计算机专业学生求职信分享
2013/12/15 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
闪闪红星观后感
2015/06/08 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL