axios和Promise.all 配合使用
2021-06-28
使用Promise.all和axios.all来并行处理多个接口请求,确保所有数据返回后才进行页面显示,以满足业务需求。
由于项目中本来一个接口获取到的数据,被拆分到了多个接口,但是还要能全部返回数据之后才能做页面显示,虽然发很多http请求会慢,但是因为是异步的,而且符合业务需求,所以想到了使用promise All。
let reqArr = [getNames(), getTypes(), getAges()]
axios.all(reqArr).then(axios.spread((first, second, third)=>{<!-- -->
console.log('结果1', first)
console.log('结果2', second)
console.log('结果3', third)
}))
使用方法:
//拼接get请求地址
function getData(groupId){
//获取数据
let queryStr='http://10.**.**.**/data.aspx?mdid=ModelData&groupid='+groupId+'date='+new Date().getTime()
return queryStr;
}
//返回多个axios请求promise;
function getPromiseArray(groupIds)
{
let promiseArray=[];
for (let groupId of groupIds){
const promiseEach = axios.get(getWfsByGroupId(groupId),
{
withCredentials: true
});
promiseArray.push(promiseEach);
}
return promiseArray;
}
//http全部返回之后,获取返回数据
function getAllWfs(groupIds,callBack){
let allWfs={};
Promise.all(getPromiseArray(groupIds)).then(function(values) {
for(let i=0;i<values.length;i++)
{
let str=JSON.parse(values[i].data);
}
}
callBack(allWfs);
});
}