axios.all()解决并发请求

>> 欢迎您客人: 登录 | 注册 | 在线 | 搜索 | 风格 | 帮助 | 统计 | 文章

返回首页

>>分享Web前端开发技术，并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持

书籍支持

卫琴直播

品书摘要

在线测试

资源下载

联系我们

Java技术网站 → 『 Java开发技术』 → 『 Web前端开发技术专题』 → axios.all()解决并发请求

您是本文章第 14968 个阅读者

* 贴子主题: axios.all()解决并发请求

点赞(0) 收藏

作者:flybird 发表时间：2021-04-21 05:03:25

消息

查看

搜索

好友

邮件

复制

引用

axios.all()、axios.spread()两个辅助函数用于处理同时发送多个请求，可以实现在多个请求都完成后再执行一些逻辑。注意：该方法是axios的静态方法，不是axios实例的方法！

首先下载axios

npm install axios --sava-dev
在main.js中引入axios，因为其不属于vue全家桶，所以将其挂载在vue原型上，实现全局使用

main.js

//引入axios模块(先下载`axios`--)
import axios from 'axios'
//将axios挂载在vue原型链上
Vue.prototype.$axios = axios;

在其他组件使用axios配合 axios.all()、axios.spread()同时发送多个请求

//在methods中定义请求方法，并return出去，不要写请求回调then()
methods:{
    getAllTask:function(){
     console.log('调用第一个接口')
     return this.$axios({
              url:'http://192.168.*.**:***/api/getTask/getAllData',
              method:'GET',
              params:{
                offset:1,
                pageSize:10
              }
            })
    },
    getAllCity:function(){
     console.log('调用第二个接口')
     return this.$axios({
                url:'http://192.168.*.**:***/city/getCities',
                method:'GET',
              })
    }
  },
//在mounted周期同时发送两个请求，并在请求都结束后，输出结果
mounted:function(){
    var _this = this;  //注意！一定要重新定义一下this指向
    this.$axios.all([_this.getAllTask(),_this.getAllCity()])
    .then(me.$axios.spread(function(res1, res2){
        console.log('所有请求完成')
        console.log('请求1结果',res1)
        console.log('请求2结果',res2)
    }))
  }

查看控制台输出情况：

点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小