组件销毁时须用abortcontroller等机制主动中断请求并显式清理资源,及时送达取消信号、断开连接、置空引用,避免内存泄漏和错误响应处理。

组件销毁时安全释放网络资源,关键不是“有没有取消”,而是“信号是否及时送达、资源是否真正断开”。只设个标志位判断组件是否存活,无法阻止请求继续执行或响应被错误处理;必须配合标准取消机制和显式清理动作。
用 AbortController 主动中断 fetch 和现代 API 请求
AbortController 是浏览器原生支持的取消信号机制,适用于 fetch、WebSocket(部分场景)、甚至一些第三方库(如 axios 1.5+)。它比自定义布尔变量更可靠,因为取消动作会直接中止底层连接或拒绝 Promise。
- 在发起请求前创建 controller 实例,并将 controller.signal 传入 fetch 选项
- 在组件卸载钩子(React 的 useEffect 清理函数、Vue 3 的 onBeforeUnmount、ArkTS 的 aboutToDisappear)中调用 controller.abort()
- 注意:signal 一次性生效,每个请求应配独立 controller;多个请求需分别管理,不可复用
对 Axios 请求,优先用 AbortController 替代 CancelToken
Axios 自 0.22 版起已全面支持 AbortSignal,CancelToken 已被标记为废弃。新项目应统一使用 signal 方式,避免兼容性与语义混淆。
- 发起请求时传入 { signal: controller.signal },无需额外配置 cancelToken
- 捕获错误时检查 error.name === 'AbortError',而非 axios.isCancel()
- 旧项目若仍用 CancelToken,须确保 source 在 beforeDestroy / componentWillUnmount 中调用 source.cancel()
第三方网络模块需查文档调用专用销毁方法
不是所有网络请求都走 fetch 或 axios。像 ArkTS 的 @kit.NetworkKit.http、uni-app 的 uni.request、或者某些 SDK 封装的 RPC 客户端,往往提供自己的终止接口。
- ArkTS 中使用 http.HttpRequest 时,在 aboutToDisappear 中调用 httpRequest.destroy(),它会释放连接池和监听器
- WebSocket 实例要检查 readyState,调用 ws.close() 后立即将引用设为 null
- EventSource 需调用 eventSource.close(),并移除所有 addEventListener 绑定的事件
清理后置空引用,辅助垃圾回收
光取消请求还不够。如果 controller、httpRequest、ws 等实例仍被变量持有,JavaScript 引擎可能因闭包引用无法回收它们所占内存。
- abort() 或 destroy() 执行后,立即把对应变量赋值为 null 或 undefined
- 尤其注意 ref 类型(Vue 的 ref、React 的 useRef),清理后应设置 ref.current = null
- 避免在回调中直接访问 this.state 或响应式对象,改用弱引用方式(如 ID + useEffect 依赖数组校验)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











