vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
项目中遇到该问题，记录一下
需求是连续请求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
