|
|
axios.all()、axios.spread()两个辅助函数用于处理同时发送多个请求，可以实现在多个请求都完成后再执行一些逻辑。注意：该方法是axios的静态方法，不是axios实例的方法！
- 首先下载axios
npm install axios --sava-dev - 在main.js中引入axios，因为其不属于vue全家桶，所以将其挂载在vue原型上，实现全局使用
main.js
//引入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 _this = this; //注意！一定要重新定义一下this指向
this.$axios.all([_this.getAllTask(),_this.getAllCity()])
.then(me.$axios.spread(function(res1, res2){
console.log('所有请求完成')
console.log('请求1结果',res1)
console.log('请求2结果',res2)
}))
} |
查看控制台输出情况：
 总结：两个请求执行完成后，才执行 axios.spread()中的函数，且axios.spread()回调函数的的返回值中的请求结果的顺序和请求的顺序一致
----------------------------
原文链接:https://www.jianshu.com/p/7783c3ed5e1b
程序猿的技术大观园：www.javathinker.net
[这个贴子最后由 flybird 在 2021-05-02 20:23:16 重新编辑]
|
网站系统异常
| 系统异常信息 |
Request URL:
http://www.javathinker.net/WEB-INF/lybbs/jsp/topic.jsp?postID=3772
java.lang.NullPointerException
如果你不知道错误发生的原因，请把上面完整的信息提交给本站管理人员。
|
|
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → axios.all()解决并发请求
消息
查看
搜索
好友
邮件
复制
引用