項目中遇到該問題,記錄一下
需求是連續請求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