js请求取消机制核心是abortcontroller，它通过signal控制fetch等api中断，避免资源浪费；需在组件卸载时调用abort()，并注意promise不可取消性及兼容性降级策略。
JS 中请求取消机制的核心在于 主动中断尚未完成的异步操作，避免资源浪费、状态错乱和内存泄漏。现代主流方式是使用 AbortController，它提供统一、语义清晰、原生支持的取消能力，替代了早期手动标记 + 条件判断等不健壮的做法。
AbortController 是核心载体
它是一个浏览器原生接口，通过 controller.signal 生成可传递的 AbortSignal 对象，供 fetch、XHR、setTimeout 等支持取消的 API 使用：
- 创建控制器：
const controller = new AbortController(); - 获取信号：
const signal = controller.signal; - 触发取消：
controller.abort();（会立即触发 signal 的abort事件，并使signal.aborted === true） - fetch 示例：
fetch(url, { signal }).then(...).catch(err => { if (err.name === 'AbortError') console.log('请求被取消'); });
与 Promise 结合需注意“不可取消性”
原生 Promise 一旦创建就无法从外部终止执行，AbortController 只能中断**依赖 signal 的底层操作**（如网络传输），不能强制停止 Promise 内部同步代码或已开始的微任务：
- 不要写
new Promise(...)后再手动检查signal.aborted—— 这属于“模拟取消”，逻辑易漏且不标准 - 正确做法：将 signal 直接传给真正支持它的 API（如 fetch、stream.read()），让底层在收到 abort 时自动拒绝 Promise
- 若需封装自定义异步逻辑（如轮询、定时任务），应在关键节点手动监听
signal.addEventListener('abort', ...)并清理资源
React/Vue 等框架中需绑定生命周期
组件卸载时若请求仍在进行，容易导致 setState 或响应式更新作用于已销毁实例，引发警告或错误：
- React 函数组件：在
useEffect中创建 controller，返回清理函数调用controller.abort() - Vue 3
onUnmounted钩子中调用controller.abort() - 避免在异步回调中直接修改局部状态变量（如
let data），应配合isMounted标记或 signal 判断（!signal.aborted）再更新
兼容性与降级策略
AbortController 在现代浏览器中已广泛支持（Chrome 66+、Firefox 57+、Edge 16+、Safari 12.1+），但若需支持旧版 IE 或极老环境：
- 不推荐手写 polyfill 模拟 abort 行为（无法真正中断网络请求）
- 可行降级：对 fetch 封装一层，检测
window.AbortController存在性；不存在则用setTimeout + clearTimeout模拟超时取消，或改用 XHR 手动.abort() - 更务实的做法：明确项目最低支持版本，放弃对无 AbortController 环境的支持
