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 跨域访问问题解决方法(笔记)
Jun 08 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
Javascript闭包实例详解
Nov 29 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
用javascript实现倒计时效果
Feb 09 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
JavaScript中filter的用法实例分析
2019/02/27 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
python中精确输出JSON浮点数的方法
2014/04/18 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
理财投资建议书
2014/03/12 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
财务人员岗位职责
2015/02/03 职场文书
民事上诉状范文
2015/05/22 职场文书
2016猴年春节慰问信
2015/11/30 职场文书
商业计划书之服装
2019/09/09 职场文书