实际工作中,经常有遇到一个页面初始需要多个请求的情况,也尝试过async去做,不过效果感觉不是很满意,之前也知道axios中有个all()的方法可以做多个请求,但是没有仔细去了解,今天看到一篇文章有写到这方面的知识,刚好自己也学习一下。
用axios.all()、axios.spread()这两个函数来处理多个请求,该方法是axios的静态方法,不是axios实例方法
//引入axios模块(先下载“axios”)
import axios from 'axios'
//将axios挂载在vue原型链上
Vue.prototype.$axios=axios;
在组件中使用axios配合axios.all()、axios.spread()同时发送多个请求
//在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()回调函数的返回值中的请求结果的顺序和请求的顺序一致