vue中使用axios对同一个接口连续请求导致返回数据混乱的问题

2024-05-31 07:43| 来源: 网络整理| 查看: 265

项目中遇到该问题，记录一下

需求是连续请求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

【本文地址】

公司简介

联系我们