如何在Axios API请求中直接使用中止信号（Abort Signal），实现页面离开时取消请求？

嗨，我懂你的痛点——每个请求都手动传signal确实太繁琐了，尤其是当你有一堆API方法的时候。其实我们可以在你的ApiService基类里统一处理，不用逐个修改请求方法，一起来看看怎么实现：

第一步：改造你的ApiService基类 #

我们可以在基类里维护一个全局的AbortController实例，然后自动把它的signal注入到所有请求中，同时添加一个统一取消所有请求的方法：

// Base class
abstract class ApiService {
  // 初始化一个AbortController实例，用来管理所有请求的中止信号
  private abortController: AbortController = new AbortController();

  get(url: string) {
    // 自动将signal注入到get请求中，不用手动传
    return axiosInstance.get(url, { signal: this.abortController.signal });
  }

  post(url: string, data: any) {
    // 同理，post请求也自动带上signal
    return axiosInstance.post(url, data, { signal: this.abortController.signal });
  }

  // 统一取消所有未完成请求的方法
  cancelAllRequests() {
    // 触发中止，还可以传个自定义消息方便调试
    this.abortController.abort('页面即将离开，取消所有未完成请求');
    // 重新创建一个控制器，避免后续新请求直接被中止
    this.abortController = new AbortController();
  }
}

第二步：在页面离开时调用取消方法 #

接下来，只需要在页面卸载/离开的生命周期钩子中，调用这个cancelAllRequests方法就行，不用管具体有哪些请求在跑：

举个React的例子：

// 子类示例：用户相关API服务
const UserApiService = new class extends ApiService {
  getUser(id: number) {
    return this.get(`/users/${id}`);
  }

  updateUser(id: number, data: any) {
    return this.post(`/users/${id}/update`, data);
  }
}();

function UserProfilePage() {
  useEffect(() => {
    // 页面卸载时，自动取消所有该实例下的请求
    return () => {
      UserApiService.cancelAllRequests();
    };
  }, []);

  // ... 其他页面逻辑，比如发起请求获取用户信息
}

再举个Vue的例子：

<script setup>
// 子类示例：商品相关API服务
const ProductApiService = new class extends ApiService {
  getProductList(params: any) {
    return this.get('/products', { params });
  }
}();

// 在页面卸载前调用取消方法
onBeforeUnmount(() => {
  ProductApiService.cancelAllRequests();
});
</script>

额外小提示 #

• 如果你的项目里每个页面都对应一个独立的ApiService实例，这样的方式会更安全——每个页面只取消自己的请求，不会影响其他页面的请求。
• 如果需要更细粒度的控制（比如单独取消某一个请求），可以在基类里添加创建独立AbortController的方法，但针对你“页面离开时取消所有请求”的需求，上面的全局控制器方案已经足够高效。

备注：内容来源于stack exchange，提问作者tan truong the