Soybean Admin 项目中 axios 取消请求机制的现代化改造

背景介绍

在现代前端开发中，请求取消是一个非常重要的功能特性。Soybean Admin 作为一个基于 Vue 3 的中后台前端解决方案，其内置的 axios 封装层原先使用的是基于 CancelToken 的取消请求机制。随着 axios 0.22.0 版本的发布，官方正式推荐使用更现代的 AbortController API 来替代传统的 CancelToken 方式。

技术演进

传统的 CancelToken 方式

原先的实现方式是通过为每个请求生成唯一的请求 ID，然后通过全局方法 cancelRequest 和 cancelAllRequest 来取消请求。这种方式存在几个局限性：

1. 依赖于 axios 特定的 CancelToken 实现
2. 取消控制粒度较粗，难以精确控制单个请求
3. 与现代浏览器原生 API 不兼容

现代的 AbortController 方式

新的实现采用了浏览器原生支持的 AbortController API，这种方式具有以下优势：

1. 符合现代 Web 标准，是 Fetch API 的一部分
2. 提供了更细粒度的控制能力
3. 更好的性能表现
4. 更清晰的代码语义

实现细节

改造后的实现保留了原有的 cancelRequest 和 cancelAllRequest 方法，确保不影响现有业务逻辑。同时新增了对单个请求的精细控制能力：

1. 每个请求可以独立创建自己的 AbortController 实例
2. 请求配置中可以传入外部的 AbortSignal
3. 全局取消方法内部会遍历所有活跃的控制器进行取消

业务场景考量

特别值得注意的是，在用户会话失效跳转登录页面的场景下，cancelAllRequest 方法仍然非常有用。当检测到会话无效时，可以立即取消所有进行中的请求，避免不必要的网络流量和潜在的数据不一致问题。

迁移建议

对于 Soybean Admin 的用户来说，这一改动基本是无感知的：

1. 原有的全局取消 API 保持兼容
2. 新增了更灵活的单个请求控制能力
3. 建议新代码优先使用 AbortController 方式

总结

这次改造使 Soybean Admin 的请求取消机制更加现代化和标准化，既保持了向后兼容性，又为开发者提供了更强大的控制能力。这也是前端技术不断演进的一个缩影，从框架特定实现向 Web 标准靠拢的趋势。