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实现控制经纬度显示地图与卫星
May 20 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
微信小程序实现星级评价效果
Dec 28 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
JavaScript对象原型链原理解析
Jan 22 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
document.documentElement && document.documentElement.scrollTop
2007/12/01 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
Python实现简单的代理服务器
2015/07/25 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
python批量修改文件编码格式的方法
2018/05/31 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
结构工程研究生求职信
2013/10/13 职场文书
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
音乐教师个人总结
2015/02/06 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
合同补充协议书
2016/03/24 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android