同一API多请求结果覆盖问题：最优解决方案咨询

我有两个触发请求的按钮，均向同一API发起数据请求，不同按钮对应不同参数（比如按钮A请求2023年数据，按钮B请求2022年数据），用store变量存储响应结果。短时间内先后点击A、B时，可能出现旧请求的响应晚于新请求返回，导致旧结果错误覆盖新结果的问题。代码示例如下：

// 点击按钮A
fetch('same/api', {
  body: {
    year: 2023
  }
}).then(res => {
  store = res;
})

// 点击按钮B
fetch('same/api', {
  body: {
    year: 2022
  }
}).then(res => {
  store = res;
})

现有三种解决方案，以下是各方案的分析及最优选择建议：

方案分析 #

1. 使用同步原语 #

通过锁机制阻塞后续请求，直到前一个请求完成后再发送新请求。这种方式会强制请求按顺序执行，但会导致用户操作卡顿（比如点击B后必须等A的请求结束才能发起B的请求），严重影响交互体验，不推荐用于这类场景。

2. 使用对象/Map按标识符分别存储结果 #

将不同参数（比如年份）作为键，把对应请求结果存储在对象或Map中，例如：

const store = new Map();

// 点击按钮A
fetch('same/api', { body: { year: 2023 } })
  .then(res => {
    store.set(2023, res);
  });

// 点击按钮B
fetch('same/api', { body: { year: 2022 } })
  .then(res => {
    store.set(2022, res);
  });

这种方案适合需要保留多份历史数据的场景（比如用户需要频繁切换不同年份查看），但如果业务只需要最新一次请求的结果，会造成不必要的数据存储，并非最优选择。

3. 丢弃旧请求（使用AbortController） #

当用户触发新请求时，直接取消之前未完成的请求，避免旧请求的响应更新状态。实现示例：

let abortController = null;

function fetchYearData(year) {
  // 取消之前未完成的请求
  if (abortController) {
    abortController.abort();
  }
  
  abortController = new AbortController();
  fetch('same/api', {
    signal: abortController.signal,
    body: { year }
  })
  .then(res => {
    store = res;
  })
  .catch(err => {
    // 忽略取消请求导致的错误
    if (err.name !== 'AbortError') {
      console.error(err);
    }
  });
}

// 按钮A点击事件
fetchYearData(2023);
// 按钮B点击事件
fetchYearData(2022);

这种方案能有效避免旧响应覆盖新结果，同时节省带宽（取消不必要的请求），是只需要最新请求结果场景下的最优选择。

其他可选方案 #

如果无法使用AbortController（比如兼容旧环境），可以通过时间戳判断请求的时效性，只让最新请求的响应更新状态：

let latestRequestTime = 0;

function fetchYearData(year) {
  const currentTime = Date.now();
  latestRequestTime = currentTime;
  
  fetch('same/api', { body: { year } })
  .then(res => {
    // 仅当当前请求是最新的才更新store
    if (currentTime === latestRequestTime) {
      store = res;
    }
  });
}

这种方式不需要取消请求，但旧请求仍会完成（浪费带宽），适合无法使用AbortController的场景。

总结 #

• 若需保留多份历史数据：选择方案2（对象/Map存储）；
• 若仅需最新请求结果：优先选择方案3（AbortController取消旧请求），次选时间戳判断方案；
• 方案1（同步原语）不推荐，会严重影响用户体验。

内容的提问来源于stack exchange，提问作者lai9fox