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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
Vue常用指令详解分析
Aug 19 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 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的QRcode类与大家分享
2011/11/13 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
如何打开php的gd2库
2017/02/09 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python制作填词游戏步骤详解
2019/05/05 Python
python中的itertools的使用详解
2020/01/13 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
带薪年假请假条
2014/02/04 职场文书
白血病募捐倡议书
2014/05/14 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
初中中等生评语
2014/12/29 职场文书
大雁塔导游词
2015/02/04 职场文书
入团介绍人意见范文
2015/06/04 职场文书
勇敢的心观后感
2015/06/09 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python
Python开发五子棋小游戏
2022/05/02 Python