• 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

  • 相关阅读:
    Java基础(六)
    Java基础(五)
    Java基础(四)
    Java基础(三)
    Java变量,标识符,数据类,运算符,表达式,Scanner(二)
    Mybatis(二) SQL映射文件
    Mybatis(一) 入门
    Ubuntu 16.04安装docker详细步骤
    Ubuntu原生源
    运用 jenkins 让你的项目优雅的持续化集成
  • 原文地址:https://www.cnblogs.com/shababy/p/13935452.html
Copyright © 2020-2023  润新知