如何取消Axios请求？——TextInput内容变化时仅保留最新请求的实现方案

我来帮你搞定这个冗余请求的问题，Axios的CancelToken正好能解决这种场景——每次输入变化时取消前一次未完成的请求，只保留最新的请求结果。咱们一步步修改代码：

第一步：修改网络层（NetworkManager.js） #

首先要让网络层支持接收CancelToken，并传递给Axios请求：

// NetworkManager.js
import axios from 'axios'; // 如果还没引入的话需要加上

async getData(url, cancelToken) {
  try {
    const { data: response } = await axios.get(url, {
      // 把传入的cancelToken传递给Axios
      cancelToken: cancelToken?.token
    });
    return response;
  } catch (e) {
    // 区分请求被取消的情况，避免误处理成普通错误
    if (axios.isCancel(e)) {
      console.log('请求已被取消:', e.message);
      throw e; // 抛出取消错误，让上层可以捕获判断
    } else {
      console.error('网络请求出错:', e);
      throw e; // 其他错误可以继续抛出或自定义处理
    }
  }
}

controller = {
  // 给search方法新增cancelToken参数
  search: async (search, sector, f_type, filterData = {}, cancelToken) => {
    const res = await this.getData('/url/path', cancelToken);
    return this.transformToOptions(res);
  },
};

第二步：修改业务层（Main.js） #

在TextInput的回调中，维护一个取消令牌的引用，每次触发新请求前先取消旧请求：

// Main.js
import Api from 'network/ApiManager';
import axios from 'axios';

const api = new Api();

// 用于存储上一次请求的取消函数
let cancelPreviousSearch = null;

const getSearch = useCallback(
  async (searchName, sectorTypeId, type, filterData) => {
    // 先取消前一次未完成的请求
    if (cancelPreviousSearch) {
      cancelPreviousSearch('新的搜索请求触发，取消旧请求');
    }

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

    try {
      // 把cancelTokenSource传递给网络层的search方法
      const result = await api.controller.search(searchName, sectorTypeId, type, filterData, cancelTokenSource);
      console.log(result);
      // 请求成功后，可以重置取消函数（可选，避免后续无关操作误触发）
      cancelPreviousSearch = null;
    } catch (e) {
      // 只有非取消的错误才需要处理
      if (!axios.isCancel(e)) {
        console.error('搜索请求失败:', e);
      }
    }
  }, [],
);

关键逻辑说明 #

• 取消旧请求：每次调用getSearch时，先执行之前存储的取消函数，终止pending状态的旧请求
• 传递令牌：把新创建的CancelTokenSource传递给网络层，让Axios可以识别并管理请求的生命周期
• 错误区分：在catch中判断是否是请求被取消的情况，避免把取消操作当成错误来处理

这样修改后，用户输入时只会保留最新的请求结果，之前的冗余请求会被及时取消，既节省网络资源又避免了旧结果覆盖新结果的问题～

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