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 入门级学习笔记及源码
Jan 22 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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(一)
2012/03/21 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
Javascript 布尔型分析
2008/12/22 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
web打印小结
2017/01/11 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
JavaScript实现职责链模式概述
2018/01/25 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
python实现flappy bird游戏
2018/12/24 Python
Python常见的pandas用法demo示例
2019/03/16 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
利用python在excel中画图的实现方法
2020/03/17 Python
python selenium 获取接口数据的实现
2020/12/07 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
高中数学教师求职信
2013/10/30 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
五年级小学生评语
2014/12/26 职场文书
初中信息技术教学计划
2015/01/22 职场文书
观后感的写法
2015/06/19 职场文书