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()
回調函數的的返回值中的請求結果的順序和請求的順序一致