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

314 阅读1分钟

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

实现:

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

代码实现:

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();
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;
});
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);
  }
);
requestManager.cancelAll());