JAVA高级面试进阶训练营视频教程

admin

实际工作中，经常有遇到一个页面初始需要多个请求的情况，也尝试过async去做，不过效果感觉不是很满意，之前也知道axios中有个all()的方法可以做多个请求，但是没有仔细去了解，今天看到一篇文章有写到这方面的知识，刚好自己也学习一下。

用axios.all()、axios.spread()这两个函数来处理多个请求，该方法是axios的静态方法，不是axios实例方法

首先，在mina.js中引入axios，然后将其挂载在vue原型上，全局使用

//引入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 me = this; 
    this.$axios.all([me.getAllTask(),me.getAllCity()])
    .then(me.$axios.spread(function(allTask, allCity){
        console.log('所有请求完成')
        console.log('请求1结果',allTask)
        console.log('请求2结果',allCity)
    }))
  }

两个请求执行完成后，才执行axios.spread()中的函数，且axios.spread()回调函数的返回值中的请求结果的顺序和请求的顺序一致