axios.all()解决并发请求

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

首先下载axios

npm install axios --sava-dev

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

import axios from 'axios'
Vue.prototype.$axios = axios;

定义两个请求接口的方法。

注意：在定义请求方法，并return出去，不要写请求回调then()

getAllTask(){
  console.log('调用第一个接口')
  return this.$axios({
    url:'http://192.168.*.**:***/api/getTask/getAllData',
    method:'GET',
  })
},
getAllCity(){
  console.log('调用第二个接口')
  return this.$axios({
    url:'http://192.168.*.**:***/city/getCities',
    method:'GET',
  })
}

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

//在mounted周期同时发送两个请求，并在请求都结束后，输出结果
mounted(){
  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()回调函数的的返回值中的请求结果的顺序和请求的顺序一致