字节笔记本字节笔记本

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);  
 }); 
}