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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
解决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/04/17 PHP
浅谈PHP中的
2016/04/23 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
Python开发编码规范
2006/09/08 Python
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
跟老齐学Python之list和str比较
2014/09/20 Python
Python二维码生成识别实例详解
2019/07/16 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
盛大二次面试题
2016/11/18 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
学校教师读书活动总结
2014/07/08 职场文书
物流管理专业推荐信
2014/09/06 职场文书
监察建议书
2015/02/04 职场文书
离婚案件原告代理词
2015/05/23 职场文书
党支部鉴定意见
2015/06/02 职场文书
毕业生学校组织意见
2015/06/04 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis