axios.all()、axios.spread()兩個輔助函數(shù)用于處理同時發(fā)送多個請求，可以實現(xiàn)在多個請求都完成后再執(zhí)行一些邏輯。注意：該方法是axios的靜態(tài)方法，不是axios實例的方法！

1. 首先下載axios
   npm install axios --sava-dev
2. 在main.js中引入axios，因為其不屬于vue全家桶，所以將其掛載在vue原型上，實現(xiàn)全局使用

main.js

//引入axios模塊(先下載`axios`--)
import axios from 'axios'
//將axios掛載在vue原型鏈上
Vue.prototype.$axios = axios;

3. 在其他組件使用axios配合axios.all()、axios.spread()同時發(fā)送多個請求

//在methods中定義請求方法，并return出去，不要寫請求回調(diào)then()
methods:{
    getAllTask:function(){
     console.log('調(diào)用第一個接口')
     return this.$axios({
              url:'http://192.168.*.**:***/api/getTask/getAllData',
              method:'GET',
              params:{
                offset:1,
                pageSize:10
              }
            })
    },
    getAllCity:function(){
     console.log('調(diào)用第二個接口')
     return this.$axios({
                url:'http://192.168.*.**:***/city/getCities',
                method:'GET',
              })
    }
  },
//在mounted周期同時發(fā)送兩個請求，并在請求都結束后，輸出結果
 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)
    }))
  }

總結：兩個請求執(zhí)行完成后，才執(zhí)行axios.spread()中的函數(shù)，且axios.spread()回調(diào)函數(shù)的的返回值中的請求結果的順序和請求的順序一致

原文地址：https://segmentfault.com/a/1190000019882188