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 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
vscode中使用npm安装babel的方法
Aug 02 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
php编程每天必学之表单验证
2016/03/01 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
range 标准化之获取
2011/08/28 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
在Django中限制已登录用户的访问的方法
2015/07/23 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
python 文件操作删除某行的实例
2017/09/04 Python
python数据结构之链表详解
2017/09/12 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
教师岗位职责
2013/11/17 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
优良学风班申请材料
2014/02/13 职场文书
Java Spring 控制反转(IOC)容器详解
2021/10/05 Java/Android