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 Global对象
Aug 13 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
js获取checkbox值的方法
Jan 28 Javascript
javascript十六进制及二进制转化的方法
May 06 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
详解webpack4.x之搭建前端开发环境
Mar 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 正则表达式小结
2015/02/12 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
让焦点自动跳转
2006/07/01 Javascript
[IE&FireFox兼容]JS对select操作
2007/01/07 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
Python 12306抢火车票脚本
2018/02/07 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
学校班班通实施方案
2014/06/11 职场文书
交通违章检讨书
2014/09/21 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
nginx请求限制配置方法
2021/07/09 Servers
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android