axios.all()解決併發請求

簡介： axios.all()、 axios.spread()兩個輔助函數用於處理同時發送多個請求，能夠實如今多個請求都完成後再執行一些邏輯。注意：該方法是 axios的靜態方法，不是 axios實例的方法！

首先下載 axios

npm install axios --sava-dev

在 mina.js中引入 axios，由於其不屬於 vue全家桶，因此將其掛載在 vue原型上，實現全局使用

main.js

//引入axios模塊(先下載`axios`--)
import axios from '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',
              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()回調函數的的返回值中的請求結果的順序和請求的順序一致