最近才複習axios的時候,看到axios.all和axios.spread,感到既熟悉又陌生.因為很多時候，我們可能需要同時呼叫多個後臺介面，就會高併發的問題,所以在這裡讓我好好複習一下.

axios.all和axios.spread

axios.all()、axios.spread()兩個輔助函式用於處理同時傳送多個請求，可以實現在多個請求都完成後再執行一些邏輯。注意：該方法是axios的靜態方法，不是axios例項的方法！

//將axios掛載在vue原型鏈上
Vue.prototype.$axios = axios;

在其他元件使用axios配合axios.all()、axios.spread()
 
同時傳送多個請求

Home.vue

//在methods中定義請求方法，並return出去，不要寫請求回撥then()
methods:{
    getAllTask:function(){
     console.log('呼叫第一個介面')
     return this.$axios({
       url:'http://192.168.*.**:***/api/getTask/getAllData',
       method:'GET',  // 引數get所以用params。post / put用data
       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) // allTask的返回值
      console.log('請求2結果',allCity) // allCity的返回值
    }))
  }

檢視控制檯輸出情況

兩個請求執行完成後，才執行axios.spread()中的函式，且axios.spread()回撥函式的的返回值中的請求結果的順序和請求的順序一致.

但是很多時候，我們在專案中並不會直接去axios.get,axios請求可能都放在一個檔案中，並且對加了攔截器等等

export const cargoDayNumber = (data) => {
  return axios.request({
    url: '/api/zz-xt/statistical/areas',
    method: 'post',
    data: data
  })
}

在vue檔案中的使用如下：

   let r1 = carVisitTime({ createTime: '2019-06-27' })
   let r2 = statistic({ createTime: '2019-06-27' })
   let r3 = cargoDayNumber({ createTime: '2019-07-01' })
   let r4 = enterpriseRanking()
   axios.all([r1, r2, r3, r4]).then(
     axios.spread((r1, r2, r3, r4) => {
     
      this.numberVehicleVisits = r1.data      
      this.loadingDateRank.loading = r2.data.loading
      this.loadingDateRank.unloading = r2.data.unloading 
     
      this.loadingAreasRank.loadingRegionalList = r3.data.inflow
      this.loadingAreasRank.unloadingRegionalList = r3.data.outflow 
   
      this.enterpriseLoadWeight.enterpriseLoadingRankList = r4.data.loadingRank
      this.enterpriseLoadWeight.enterpriseUnloadingRankList = r4.data.unloadingRank
     })
   )

除了axios.all，我們也可以使用Promise.all

 Promise.all([p1, p2]).then(function(values) {
    console.log(values);//values為一個數組
    ///進行你的下一步操作
  });

轉載自: https://segmentfault.com/a/1190000019882188 有輕微改動