Vue中循环调用同一接口获取数据,解决异步无法知道数据什么时候加载完成的问题
问题描述:最近在做公司项目的时候遇到一个问题,要获取echart图中的多条线的数据,需要循环多次调用一个接口,无法知道所有数据何时加载完成。解决方案:思路:使用Promise,将调用接口的函数转变为一个Promise对象,定义全局变量数组,在循环中将Promise对象push到数组中,然后用Promise.all()执行接口调用,在调用成功后执行绘图操...
·
问题描述:
最近在做公司项目的时候遇到一个问题,要获取echart图中的多条线的数据,需要循环多次调用一个接口,无法知道所有数据何时加载完成。
解决方案:
思路:使用Promise,将调用接口的函数转变为一个Promise对象,定义全局变量数组,在循环中将Promise对象push到数组中,然 后用Promise.all()执行接口调用,在调用成功后执行绘图操作。
代码:
data(){
return {
// 数组 用来存储Promise对象
result:[],
},
methods:{
// 获取单条线参数
getSingleData(params){
return new Promise((resolve,reject)=>{
this.$store.dispatch("ajaxGet",{
url:api,
params:params
}).then(res=>{
if(res.status_code===200){
resolve();
}else{
reject()
}
})
});
},
// 获取所有数据
getAllData(){
for(let i=0;i<len;i++){
this.result.push(this.getSingleData(params[i]));
}
},
// 绘图
getChart(){
Promise.all(this.result).then(()=>{
// 调用完所有接口需要做的事情
}).catch(error => {
this.$Message.error("获取数据失败");
console.log("error", error);
})
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)