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中将函数赋值给变量的调用方法
Mar 23 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 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下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php两种无限分类方法实例
2015/04/21 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
express框架下使用session的方法
2019/07/31 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
Python实现注册登录系统
2017/08/08 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
销售总监工作职责
2013/11/21 职场文书
车贷收入证明范本
2014/01/09 职场文书
代理商会议邀请函
2014/01/27 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
JavaScript中document.activeELement焦点元素介绍
2021/11/27 Javascript