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 相关文章推荐
JavaScript 定义function的三种方式小结
Oct 16 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
webpack 模块热替换原理
Apr 09 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
微信小程序实现留言板
Oct 31 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
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
php用正则表达式匹配中文实例详解
2013/11/06 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
PyTorch中的C++扩展实现
2020/04/02 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
什么是继承
2013/12/07 面试题
优秀毕业自我鉴定
2014/02/15 职场文书
小学综合实践活动总结
2014/07/07 职场文书
机电系毕业生求职信
2014/07/11 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers