取消当前正在进行的所有接口请求

米欧2025-11-14 17:11

需求：当请求接口过多，功能点切换的时候需要停止之前的请求接口。

实现：

axios.ts 实例化拦截器，自动给每个请求注入 controller.signal，并存入 manager
在响应或错误阶段移除 controller

代码实现：

typescript 复制代码

export class RequestManager {
  private controllers = new Set<AbortController>();
  add(c: AbortController) { this.controllers.add(c); }
  delete(c: AbortController) { this.controllers.delete(c); }
  cancelAll(reason = 'Canceled by RequestManager') {
    for (const c of this.controllers) c.abort(reason as any);
    this.controllers.clear();
  }
}
export const requestManager = new RequestManager();

arduino 复制代码

api.interceptors.request.use((config) => {
  // 如果外部已传入 signal，就复用；否则创建新的
  if (!config.signal) {
    const controller = new AbortController();
    config.signal = controller.signal;
    // 把 controller 挂到 config 以便响应阶段访问
    (config as any).__controller = controller;
    requestManager.add(controller);
  } else {
    // 若用户自带 signal，也可选择登记但无法拿到 controller
  }
  return config;
});

typescript 复制代码

api.interceptors.response.use(
  (res) => {
    const controller = (res.config as any).__controller as AbortController | undefined;
    if (controller) requestManager.delete(controller);
    return res;
  },
  (error) => {
    const cfg = error.config || {};
    const controller = (cfg as any).__controller as AbortController | undefined;
    if (controller) requestManager.delete(controller);
    return Promise.reject(error);
  }
);

ini 复制代码

requestManager.cancelAll());