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

分析以下一个场景，有一个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;

};

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

使用方法：
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(‘请求三’);

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏

[[email protected]]

分享 (0)