vue-axios同时请求多个接口等所有接口全部加载完成再处理操作

更新时间：2020年11月09日 10:16:10 作者：qinyong^_^

这篇文章主要介绍了vue-axios同时请求多个接口等所有接口全部加载完成再处理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

我就废话不多说了，大家还是直接看代码吧~

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的接口请求。

在已经封装好的axios方法里面，加上红框中代码，然后再在你需要的vue文件方法里面加上如下代码

这样你每点击一个事件触发新的请求时，之前仍在pending的请求就会被强制关闭了

以上这篇vue-axios同时请求多个接口等所有接口全部加载完成再处理操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

ElementUI 复杂顶部和左侧导航栏实现示例
本文主要介绍了ElementUI 复杂顶部和左侧导航栏实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
在vue中给后台接口传的值为数组的格式代码
这篇文章主要介绍了在vue中给后台接口传的值为数组的格式代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue中动态引入图片要是require的原因解析
require是一个node方法，用于引入模块，JSON或本地文件，这篇文章主要介绍了vue中动态引入图片为什么要是require,需要的朋友可以参考下
2022-10-10
详解Vue3子组件向父组件传递消息
这篇文章主要介绍了Vue3子组件向父组件传递消息,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
vue使用localStorage保存登录信息适用于移动端、PC端
这篇文章主要为大家详细介绍了vue使用localStorage保存登录信息适用于移动端、PC端，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
Javascript结合Vue实现对任意迷宫图片的自动寻路
本文将结合实例代码介绍Javascript结合Vue实现对任意迷宫图片的自动寻路，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
vue中element 的upload组件发送请求给后端操作
这篇文章主要介绍了vue中element 的upload组件发送请求给后端操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue自定义组件的四种方式示例详解
本文给大家分享vue自定义组件的四种方式，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2020-02-02
vue组件入门知识全梳理
这篇文章主要给大家介绍了关于vue组件入门知识的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
vue2.x中$attrs的使用方法教程
正常情况下Vue推荐用props向子组件参数,但是在特定场景下,使用$attrs会更方便,下面这篇文章主要给大家介绍了关于vue2.x中$attrs使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11