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同时请求多个接口 等所有接口全部加载完成再处理操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程

    vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程

    这篇文章主要介绍了vuecli3.0脚手架搭建及不同的打包环境配置vue.config.js的详细过程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • Vue发送ajax请求方法介绍

    Vue发送ajax请求方法介绍

    这篇文章介绍了Vue发送ajax请求的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-01-01
  • vue中多附件上传的实现示例

    vue中多附件上传的实现示例

    这篇文章主要介绍了vue中多附件上传的实现示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • 浅谈Vue static 静态资源路径 和 style问题

    浅谈Vue static 静态资源路径 和 style问题

    这篇文章主要介绍了浅谈Vue static 静态资源路径 和 style问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 关于Vue3过渡动画的踩坑记录

    关于Vue3过渡动画的踩坑记录

    在开发中我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验,下面这篇文章主要给大家介绍了关于Vue3过渡动画踩坑的相关资料,需要的朋友可以参考下
    2021-12-12
  • 使用kbone解决Vue项目同时支持小程序问题

    使用kbone解决Vue项目同时支持小程序问题

    这篇文章主要介绍了使用kbone解决Vue项目同时支持小程序问题,本文通过一个todo的例子跟大家详细介绍,需要的朋友可以参考下
    2019-11-11
  • vue3+vite+vant4手机端项目实战记录

    vue3+vite+vant4手机端项目实战记录

    这篇文章主要给大家介绍了关于vue3+vite+vant4手机端项目实战的相关资料,Vue3是一种前端开发框架,它的目标是提供更好的性能和开发体验,需要的朋友可以参考下
    2023-08-08
  • Vue实现Header渐隐渐现效果的实例代码

    Vue实现Header渐隐渐现效果的实例代码

    这篇文章主要介绍了Vue实现Header渐隐渐现效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • vue如何实现表单多选并且获取其中的值

    vue如何实现表单多选并且获取其中的值

    这篇文章主要介绍了vue如何实现表单多选并且获取其中的值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • axios封装,使用拦截器统一处理接口,超详细的教程(推荐)

    axios封装,使用拦截器统一处理接口,超详细的教程(推荐)

    这篇文章主要介绍了axios封装使用拦截器处理接口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论