前端重复异步请求导致数据重复问题

论如何成为一个优秀的码农

已于 2023-06-16 13:40:47 修改

阅读量496

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端 javascript 开发语言

于 2023-05-15 17:52:18 首次发布

本文链接：https://blog.csdn.net/qq_45754184/article/details/130687355

vue 专栏收录该内容

14 篇文章

订阅专栏

在js函数showNodes中，由于异步请求的并发执行，可能存在第二次调用时数据处理未完成，导致nodes数组出现重复数据。问题可能源于请求的顺序与处理顺序不匹配，以及新旧数据的合并过程。解决方案可能包括使用锁机制或Promise.all来确保数据处理的顺序性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

showNodes: function(clusterId){
        let _this = this;
        _this.nodes=[];
        //获取节点信息
        ClusterApi.getClusterNode({"id": clusterId}).then(function(res) {
          $.each(res.data.records,function(i,item){
            _this.nodes.push({label: item.name, value: item.name,disabled:false});
          });
        });
      }

js中有以上showNodes函数，函数里的异步请求多次调用，第二次调用时发生一些问题导致nodes中出现了重复数据。可能的原因有：

1）调用时机：第一次调用函数 showNodes 时数组 nodes 被重置为空数组 []。如果多次调用至第二次请求执行时，首次调用还未完成，那么数组 nodes 中将不会有数据。会导致第二次请求获取到的可用数据不足，从而出现重复的数据。

2）数据加工：第二次请求获取的数组 res.data.records 的项和第一次请求的项也可能有重复。因为在第二次请求时，第一次请求获取的所有数据可能仍未完全处理完成，因此新获取的数据项将会与已请求数据进行合并，从而导致数据重复。