问题:
在做项目时候发现,一个页面中有多个Tag,每个Tag对应的数据调用的是同一个接口,参数不同,在快送切换Tag时,展示的是前一个请求返回的数据
解决办法:
①取消请求。利用Cancel Token或者AbortController,当第二次请求数据接口时,取消第一次的请求。
②id查询。每次向后台进行数据请求时带上唯一的id,在渲染时通过id来选择数据进行渲染。
③前端闭包记录每次请求的id,渲染时通过id来选择数据进行渲染。
前两种没来得及研究,使用第三种方案解决
简易实现如下:
const cache = {};
const asyncDebounce = (key) => {
const time = newDate().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()){
// 只会拿到最后一次的数据
}})
}