多步骤表单中应为每步请求创建独立abortcontroller实例，步骤切换或组件卸载时调用abort()取消未完成请求，并在catch中过滤aborterror避免误报，axios推荐v0.27+直接传signal。
在多步骤表单提交中，用户可能中途跳转、点击“上一步”或关闭页面，此时已发起但未完成的请求（如校验、上传、保存草稿）应被主动取消，避免无效操作和资源浪费。核心是利用 AbortController 统一管理请求信号，并在步骤切换或组件卸载时调用 abort()。
为每步请求绑定独立的 AbortController
不要复用同一个控制器——每步操作（例如“验证手机号”“上传身份证”“提交订单”）应创建自己的 AbortController 实例，确保取消只影响当前步骤，不影响其他并行或后续逻辑。
- 在进入某一步时（如 React 中
useEffect或 Vue 中onMounted），初始化控制器：const controller = new AbortController(); - 发起请求时传入
signal：fetch('/api/step2', { signal: controller.signal }) - 将控制器实例暂存（如 React 中用
useRef，Vue 中用ref），便于后续取消
步骤切换前主动取消上一步的未完成请求
当用户点击“下一步”“上一步”或通过路由跳转离开当前步骤时，需立即终止该步骤中仍在 pending 的请求。
- React 示例：在
useEffect清理函数中调用controller.current?.abort() - Vue 示例：在
onBeforeUnmount或路由守卫beforeRouteLeave中执行controller.abort() - 注意：即使请求已响应或失败，调用
abort()也安全，不会报错
统一处理 abort 错误，避免未捕获异常
被取消的请求会抛出 AbortError（err.name === 'AbortError'），若不显式捕获，可能触发全局错误监听或中断流程。
- 在
catch块中判断错误类型：if (err.name === 'AbortError') return; - 避免把 abort 当作业务错误展示给用户（如不弹“请求失败，请重试”）
- 可配合加载状态：请求开始设
isLoading = true，abort 后设isLoading = false，防止按钮持续禁用
注意 Axios 等封装库的兼容写法
若使用 Axios，需通过 cancelToken（v0.22–）或 signal（v0.27+）支持取消；推荐升级到支持 AbortSignal 的版本：
- Axios v0.27+：
axios.post('/api/step3', data, { signal: controller.signal }) - 旧版 Axios：用
CancelToken.source()，但需额外适配，不推荐新项目使用 - 自定义请求封装（如工具函数
request()）务必透传signal选项
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
