多次请求同一数据接口造成数据混乱问题解决办法-阿里云开发者社区

开发者社区> 武汉-陈武> 正文

多次请求同一数据接口造成数据混乱问题解决办法

简介: 在进行前端开发过程中,经常会遇到需要请求同一个数据接口但不同参数的需求,这种情况下当用户通过页面操作频繁请求该接口,而接口的不同参数响应时间差异较大时,容易引发数据渲染混乱的bug。
+关注继续查看

分析以下一个场景,有一个select下拉框,下拉数据来源于用户输入的值并通过接口查询进行远程加载。假设用户输入1之后,接口需要5s才能得到响应值。用户输入2之后接口只需要1s就能得到响应值。用户先输入1,然后触发了第一次查询,接着删掉输入2,触发了第二次查询。这个时候会出现一个奇怪的现象。下拉数据先渲染条件为2的数据,接着在渲染条件为1的数据,造成了数据混乱。
以上场景不止在这个特殊场景下存在,当遇到网络不好的时候,也会出现这个问题。并且就算给这些频繁操作的接口加上防抖也无法彻底避免这个问题。
临时解决办法:限制同类型的请求,当同类型的请求未完成之前不允许发送第二次请求,比如加上loading或者disabled来限制同类型的操作。
真正的解决办法:①取消请求。利用Cancel Token或者AbortController,当第二次请求数据接口时,取消第一次的请求。②id查询。每次向后台进行数据请求时带上唯一的id,在渲染时通过id来选择数据进行渲染。③前端闭包记录每次请求的id,渲染时通过id来选择数据进行渲染。
第三种方案的简易实现如下:
const cache = {};
const asyncDebounce = (key) => {

const time = new Date().getTime();
cache[key] = time;
return () => cache[key] === time;

};

使用方法:
function test(p){
// 同一数据接口的key,可以使用url来作为key
const isValid = asyncDebounce('test');
const result = new Promise((resolve) => setTimeout(() => resolve(p),3000));
result.then(res => {

 if(isValid()){
  // 只会拿到最后一次的数据
 }

})
}
test('请求一');
test('请求二');
test('请求三');

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
MySQL 中两张表主键自增时,Java 后端组成树形结构的解决办法
当需要将两张不同表的数据进行合并处理,并且两张表的主键均为自增,主键同是数字。这时候需要区分的、不同的表进行取值,可以使其中一张表的主键为负数,即-1,-2,-3。 当需要把取出来的两张表分别再存进数据库时,要将之前取值是负数的主键转为正数,而转为正数的方式也很简单,也就是负负得正,即(-(...
1109 0
flutter网络dio框架公共请求参数、请求header使用总结
> 本文章将讲述 > 1.get请求中配置公共参数 > 2.post请求配置公共参数 > 3.请求header配置
481 0
winform 多线程中ShowDialog()步骤无效的解决办法
private void Form1_Load(object sender, EventArgs e) { Thread thread = new Thread(remind); thread.
853 0
"无法删除数据库,因为该数据库当前正在使用"问题解决
原文:"无法删除数据库,因为该数据库当前正在使用"问题解决 异常处理汇总-数据库系列  http://www.cnblogs.com/dunitian/p/4522990.html  以前刚学数据库的时候比较苦恼这个问题,今天删除的时候又看见了,正好一起记录一下: 图形化方法: 命令行方法...
1225 0
葛洲坝集团联手阿里云打造数据中台 数字化驱动业务创新
7月11日,在阿里云武汉城市峰会上,大型央企葛洲坝集团首次对外展示数据中台的建设成果,通过基于阿里云中台、大数据、IoT物联网等技术打造的数据中台,数字化管理多元业务,提升运营效率,并进行业务创新。
5181 0
1
文章
0
问答
来源圈子
更多
阿里云GTS能力中心(浩鲸智能),从交付的视角探讨数字化转型过程中大型软件开发实践、以及阿里云产品在各行业被集成的案例分享、技术沉淀等内容。敬请关注!
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载