如何仅保留用户最后一次点击触发的Axios请求响应？

核心思路是每次用户点击时，先终止上一次还在等待响应的请求，再发起新请求，这样就只会处理最后一次点击对应的后端响应。以下是两种基于Axios的实现方式：

方法1：使用AbortController（Axios v0.22.0+ 推荐） #

这是Axios官方现在推荐的请求取消方案，基于浏览器原生的Abort API。

// 全局变量：存储当前请求的控制器
let currentAbortController = null;

function handleImageClick(imageId) {
  // 取消上一次未完成的请求
  if (currentAbortController) {
    currentAbortController.abort('用户发起新请求，终止旧请求');
  }

  // 创建新的请求控制器
  currentAbortController = new AbortController();

  // 发起带终止信号的请求
  axios.get(`/api/get-price?imageId=${imageId}`, {
    signal: currentAbortController.signal
  })
  .then(response => {
    // 仅处理最后一次请求的响应
    updatePriceDisplay(response.data.price);
    // 请求完成后清空控制器，避免内存泄漏
    currentAbortController = null;
  })
  .catch(error => {
    // 忽略"请求被取消"的错误，不展示给用户
    if (axios.isCancel(error)) {
      console.log('旧请求已取消:', error.message);
    } else {
      // 处理真实的请求错误（比如网络问题）
      console.error('请求失败:', error);
    }
  });
}

方法2：使用CancelToken（兼容旧版Axios） #

如果你的项目使用的是v0.22.0之前的Axios版本，可以用CancelToken方案：

// 全局变量：存储取消上一次请求的函数
let cancelLastRequest = null;

function handleImageClick(imageId) {
  // 取消上一次未完成的请求
  if (cancelLastRequest) {
    cancelLastRequest('用户发起新请求，终止旧请求');
  }

  // 创建新的CancelToken源
  const source = axios.CancelToken.source();
  cancelLastRequest = source.cancel;

  // 发起带取消令牌的请求
  axios.get(`/api/get-price?imageId=${imageId}`, {
    cancelToken: source.token
  })
  .then(response => {
    updatePriceDisplay(response.data.price);
    // 请求完成后清空取消函数
    cancelLastRequest = null;
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('旧请求已取消:', error.message);
    } else {
      console.error('请求失败:', error);
    }
  });
}

关键说明 #

• 两种方案的核心逻辑一致：每次点击优先终止未完成的旧请求，确保只有最后一次请求的响应会触发价格更新。
• 必须在请求完成（成功/失败）后清空全局变量，避免内存泄漏。
• 取消请求的错误需要单独捕获，不要将其作为业务错误提示给用户，避免造成困惑。

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