前端同一个接口频繁调用，只处理最后一次返回

问题：

在做项目时候发现，一个页面中有多个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()){
  // 只会拿到最后一次的数据
 }})
}

参考，转载：https://developer.aliyun.com/article/795869