axios中批量请求方法解决同时请求多个接口-多并发
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()
回调函数的的返回值中的请求结果的顺序和请求的顺序一致
本文来自博客园,作者:JackieDYH,转载请注明原文链接:https://www.cnblogs.com/JackieDYH/p/17634614.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!