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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM