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 相关文章推荐
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
如何在selenium中使用js实现定位
Aug 18 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
php使用cookie保存登录用户名的方法
2015/01/26 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
php获取excel文件数据
2017/04/21 PHP
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python常用的json标准库
2019/02/19 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
python计算导数并绘图的实例
2020/02/29 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
优秀毕业自我鉴定
2014/02/15 职场文书
教学改革实施方案
2014/03/31 职场文书
争先创优公开承诺书
2014/08/30 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2015年营业员工作总结
2015/04/23 职场文书
综治目标管理责任书
2015/05/11 职场文书
表扬信范文
2019/04/22 职场文书
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸