實(shí)際工作中，經(jīng)常有遇到一個(gè)頁面初始需要多個(gè)請求的情況，也嘗試過async去做，不過效果感覺不是很滿意，之前也知道axios中有個(gè)all()的方法可以做多個(gè)請求，但是沒有仔細(xì)去了解，今天看到一篇文章有寫到這方面的知識(shí)，剛好自己也學(xué)習(xí)一下。

用axios.all()、axios.spread()這兩個(gè)函數(shù)來處理多個(gè)請求，該方法是axios的靜態(tài)方法，不是axios實(shí)例方法

//引入axios模塊（先下載“axios”）
import axios from 'axios'
//將axios掛載在vue原型鏈上
Vue.prototype.$axios=axios;

在組件中使用axios配合axios.all()、axios.spread()同時(shí)發(fā)送多個(gè)請求

//在methods中定義請求方法，并return出去，不要寫請求回調(diào)then()
methods:{
    getAllTask:function(){
     console.log('調(diào)用第一個(gè)接口')
     return this.$axios({
              url:'http://192.168.*.**:***/api/getTask/getAllData',
              method:'GET',
              params:{
                offset:1,
                pageSize:10
              }
            })
    },
    getAllCity:function(){
     console.log('調(diào)用第二個(gè)接口')
     return this.$axios({
                url:'http://192.168.*.**:***/city/getCities',
                method:'GET',
              })
    }
  },
//在mounted周期同時(shí)發(fā)送兩個(gè)請求，并在請求都結(jié)束后，輸出結(jié)果
 mounted:function(){
    var me = this; 
    this.$axios.all([me.getAllTask(),me.getAllCity()])
    .then(me.$axios.spread(function(allTask, allCity){
        console.log('所有請求完成')
        console.log('請求1結(jié)果',allTask)
        console.log('請求2結(jié)果',allCity)
    }))
  }

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