zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    C#中索引器的实现过程,是否只能根据数字进行索引?
    重载与覆盖的区别?
    C#中 property 与 attribute的区别?
    C#可否对内存进行直接的操作?
    在c#中using和new这两个关键字有什么意义?
    secs/gem协议
    框架2
    C#开发框架学习
    C#两种数据类型
    泛型参数
  • 原文地址:https://www.cnblogs.com/shababy/p/13935452.html
Copyright © 2011-2022 走看看