axios.all()倍啥、axios.spread()兩個(gè)輔助函數(shù)用于處理同時(shí)發(fā)送多個(gè)請(qǐng)求禾乘，可以實(shí)現(xiàn)在多個(gè)請(qǐng)求都完成后再執(zhí)行一些邏輯。注意：該方法是axios的靜態(tài)方法虽缕，不是axios實(shí)例的方法始藕！
- 首先下載axios
npm install axios --sava-dev - 在main.js中引入axios，因?yàn)槠洳粚儆趘ue全家桶氮趋，所以將其掛載在vue原型上伍派，實(shí)現(xiàn)全局使用
main.js
//引入axios模塊(先下載`axios`--)
import axios from 'axios'
//將axios掛載在vue原型鏈上
Vue.prototype.$axios = axios;
- 在其他組件使用axios配合
axios.all()、axios.spread()同時(shí)發(fā)送多個(gè)請(qǐng)求
//在methods中定義請(qǐng)求方法剩胁，并return出去诉植，不要寫請(qǐng)求回調(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è)請(qǐng)求，并在請(qǐng)求都結(jié)束后昵观，輸出結(jié)果
mounted:function(){
var _this = this; //注意晾腔！一定要重新定義一下this指向
this.$axios.all([_this.getAllTask(),_this.getAllCity()])
.then(me.$axios.spread(function(res1, res2){
console.log('所有請(qǐng)求完成')
console.log('請(qǐng)求1結(jié)果',res1)
console.log('請(qǐng)求2結(jié)果',res2)
}))
}
總結(jié)：兩個(gè)請(qǐng)求執(zhí)行完成后舌稀，才執(zhí)行
axios.spread()中的函數(shù)，且axios.spread()回調(diào)函數(shù)的的返回值中的請(qǐng)求結(jié)果的順序和請(qǐng)求的順序一致
