项目中遇到该问题,记录一下
需求是连续请求5次同一个接口,但是参数不一样。最开始使用 forEach 接口循环调用接口,发现有时候先请求的比后请求的返回数据慢,导致数据顺序混乱,所以需要控制请求的顺序。
因为需要将5次数据拿到依次放入指定的数组中。
这里就使用到了 Promise.all
getLawhelpMethod(){
const objArrs = [
{
serverType:'1',
articleType:'1'
},
{
serverType:'1',
articleType:'2'
},
{
serverType:'1',
articleType:'3'
},
{
serverType:'1',
articleType:'4'
},
{
serverType:'1',
articleType:'5'
},
]
this.tabsData.tabMain = []
let promise1 = getService(objArrs[0])
let promise2 = getService(objArrs[1])
let promise3 = getService(objArrs[2])
let promise4 = getService(objArrs[3])
let promise5 = getService(objArrs[4])
Promise.all([promise1,promise2,promise3,promise4,promise5]).then(res => { // 接口完成
// console.log(res) // res 返回的数据是按顺序返回的一个数组
① const resData = res.map((item)=>{
if(item.rows.length){
return {
content: item.rows[0].content
}
}else{
return {
content: '暂无数据'
}
}
})
this.tabsData.tabMain = resData
② res.forEach((item)=>{ // 这里再用 forEach 就不会数据混乱了(之前是因为请求接口了)
if(item.rows.length){
this.tabsData.tabMain.push({content:item.rows[0].content})
}else{
this.tabsData.tabMain.push({content:'暂无数据'})
}
})
})
},
参考链接:https://segmentfault.com/a/1190000020916235?utm_source=tag-newest