前端同一个接口频繁调用，只处理最后一次返回_前端怎么让接口只执行最后一次-CSDN博客

文章讲述了在开发中遇到的一个问题，即页面上的多个Tag共享同一个数据接口，切换Tag时显示的仍是前一次请求的数据。作者采用了异步防抖的策略，通过创建一个缓存对象和一个异步防抖函数，确保在快速切换时只处理最后一次请求，从而解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

在做项目时候发现，一个页面中有多个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