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 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 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的特殊设置
2006/10/09 PHP
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
php url路由入门实例
2014/04/23 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php 类自动载入的方法
2015/06/03 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
常用简易JavaScript函数
2009/04/09 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
vue实现扫码功能
2020/01/17 Javascript
[08:06]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant 选手采访
2021/03/11 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
python使用pil生成缩略图的方法
2015/03/26 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
2014社区三八妇女节活动总结
2014/03/01 职场文书
行政前台岗位职责
2015/04/16 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python