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

原文地址:https://www.cnblogs.com/shababy/p/13935452.html