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

简介: 在进行前端开发过程中,经常会遇到需要请求同一个数据接口但不同参数的需求,这种情况下当用户通过页面操作频繁请求该接口,而接口的不同参数响应时间差异较大时,容易引发数据渲染混乱的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('请求三');

相关文章
|
7月前
【记录】有关接口响应很快,但是在页面渲染的时候发现很慢的问题
【记录】有关接口响应很快,但是在页面渲染的时候发现很慢的问题
181 0
|
5月前
|
JSON 数据格式
axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
|
5月前
|
JSON 前端开发 Java
前后端数据交互-----表单数据获取不到,出错的原因,在编写接口时,没有考虑数据如何返回,解决问题的思路,找到自己出错的地方,围绕着出错的地方进行考虑(很重要),找对解决问题的视频,理清返回数据的思路
前后端数据交互-----表单数据获取不到,出错的原因,在编写接口时,没有考虑数据如何返回,解决问题的思路,找到自己出错的地方,围绕着出错的地方进行考虑(很重要),找对解决问题的视频,理清返回数据的思路
后端登录接口使用postman,无法接收返回数据,怎样解决,认真比较与原项目的代码,看看有没有写的不一样的,问题就能解决,不要多少写,根据postman的提示先找到错误的进程,看错误进程出现在那个进程
后端登录接口使用postman,无法接收返回数据,怎样解决,认真比较与原项目的代码,看看有没有写的不一样的,问题就能解决,不要多少写,根据postman的提示先找到错误的进程,看错误进程出现在那个进程
|
定位技术
后端一次性返回几百万条数据怎样处理
后端一次性返回几百万条数据怎样处理
|
JSON 前端开发 数据格式
前端对接口参数错误如何解决
前端对接口参数错误如何解决
129 0
|
JSON 前端开发 数据格式
前端对接口参数错误如何解决
前端对接口参数错误如何解决
94 0
|
前端开发 NoSQL Redis
案例05-将不必要的逻辑放到前端(发送调查问卷)
案例05-将不必要的逻辑放到前端(发送调查问卷)
|
中间件 开发工具 数据库
协同开发时巧用gitignore | 巧用中间件 避免网络请求时携带登录信息
今天分享一下:在多人协同开发中,如果大家都进行本地测试可能会出现的问题。
117 4
|
前端开发 测试技术
【测试平台开发】21. 完成发送接口请求显示响应头信息
【测试平台开发】21. 完成发送接口请求显示响应头信息
【测试平台开发】21. 完成发送接口请求显示响应头信息