循环无法同步请求数据，顺序错乱问题

最新推荐文章于 2024-03-20 05:19:39 发布

原创最新推荐文章于 2024-03-20 05:19:39 发布 · 706 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

在处理数组数据并循环调用接口获取信息时，由于接口返回速度不一致，可能导致数据顺序混乱。为了解决这个问题，文中提出了一个解决方案：在请求接口时传递数据的下标，确保返回的数据能按照原始下标填充到数组相应位置。使用Vue.js的$nextTick方法更新DOM后，可以正确显示按顺序的数据。

对数组数据内容循环分别进行请求接口数据，会因为数据接口的返回快慢造成数据push拼接的数据与原数组数据顺序不同。后发现百度无明确方法，因此，做了一个数据改动进行处理数据错乱问题。（循环请求时将数据下标同时传递，使其返回数据占据原始下标）

示例:
listAll=[]//目的数据  data中定义

forData(){
    this.listAll=[]//对每次调用forData方法时对数据进行清空
    let arr=[data1,data2,data3...]//循环数据
        arr.forEach((item,index)=>{
            this.getDataApi(item,index)    
        })
    }
getDataApi(item,index){
    api.getData(item).then((data)=>{
        this.listAll[index] = data //先将其对应下标放到数组上，此时页面数据会出现数据不刷新问题
        this.$nextTick(()=>{
            this.$set(this.listAll,index,data)//对数据进行刷新，然后就可以按数据顺序展示了
        })
    })

}