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 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
js实现AI五子棋人机大战
May 28 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 xml文件操作代码(一)
2009/03/20 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
jQuery实现动态向上滚动
2020/12/21 jQuery
Python字符转换
2008/09/06 Python
用Python写的图片蜘蛛人代码
2012/08/27 Python
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
python 性能提升的几种方法
2016/07/15 Python
Python3.6正式版新特性预览
2016/12/15 Python
python实现rsa加密实例详解
2017/07/19 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
Python字典对象实现原理详解
2019/07/01 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
Python字符串及文本模式方法详解
2020/09/10 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
Shell编程面试题
2012/05/30 面试题
DTD的含义以及作用
2014/01/26 面试题
公司投资建议书
2014/05/16 职场文书
仓管员岗位职责
2015/02/03 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
2016七一建党节慰问信
2015/11/30 职场文书