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
Mar 09 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 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
新闻分类录入、显示系统
2006/10/09 PHP
PHP数据缓存技术
2007/02/14 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
jquery 的 $("#id").html() 无内容的解决方法
2010/06/07 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
js实现随机点名程序
2020/09/17 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
Python入门篇之文件
2014/10/20 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
Python定时执行之Timer用法示例
2015/05/27 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
python requests post多层字典的方法
2018/12/27 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python 发送json数据操作实例分析
2019/10/15 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
离婚协议书范文
2015/01/26 职场文书
初中语文教学反思范文
2016/03/03 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB