Chrome DevTools 无法直接检测未决 Promise 泄漏，因其本身轻量且不被 V8 视为泄漏源；真正泄漏的是 Promise 回调闭包中意外长期持有的组件实例、DOM 节点等对象。
Chrome DevTools 无法直接“看到未决的 Promise”，因为 Promise 实例本身是轻量对象，V8 不会把 pending 状态的 Promise 当作内存泄漏源；真正要查的是 Promise 回调中意外被长期持有的上下文——比如组件实例、DOM 节点、大数组或闭包变量。所谓“未决 Promise 泄漏”，本质是这些 Promise 没被 settle（resolve/reject），其回调函数闭包持续被强引用，导致 GC 无法回收关联对象。
怎么确认 Promise 是否成了泄漏载体
- 打开 Memory 面板 → 先点小垃圾箱图标（Collect garbage）→ 再点击 Take heap snapshot
- 操作前拍一张（Baseline），执行异步操作（如打开弹窗并触发 fetch）后拍第二张，关闭弹窗/卸载组件后再拍第三张
- 切换到 Comparison 视图，筛选构造函数为
Promise的条目：- 如果
# New − # Deleted值稳定为 0，说明 Promise 本身已释放，问题不在它 - 如果该值持续为正，且伴随大量
Closure或Detached DOM tree增长，说明 Promise 回调闭包被外部长期持有
- 如果
重点看 Retaining Tree 中的三类典型路径
-
PromiseReactionJob → Closure → componentInstance
表示组件已销毁，但 Promise 的.then()或.catch()里还拿着 this 或 ref，没被清理 -
PromiseReactionJob → Closure → $el / document.getElementById(...)
表示 DOM 已移除，但 Promise 回调还在引用它（常见于未解绑的事件监听器或 jQuery.data） -
PromiseReactionJob → Closure → window / global / timer
表示 Promise 是由全局定时器（如 setInterval）反复创建，且没终止逻辑，每次回调都捕获新状态
快速验证是否真有泄漏
- 在 Console 中执行
performance.memory?.usedJSHeapSize，重复操作几次，观察数值是否阶梯式上涨 - 启用 Performance 面板 → 勾选 Memory → 录制操作过程 → 查看 JS Heap 曲线是否只升不降（GC 后不回落）
- 若怀疑某段 Promise 代码（如轮询请求），临时加一句
console.trace()在.then()开头，确认它是否在组件卸载后仍被执行
常见修复方式（对应典型场景）
- 组件销毁时取消 pending 请求：
- 使用
AbortController传入fetch，并在beforeUnmount/useEffect cleanup中调用abort() - 对于 Promise 封装的库（如 axios），启用 cancel token 或升级到支持 AbortSignal 的版本
- 使用
- 避免在
.then()中直接引用 this 或 DOM：- 改用弱引用缓存（如
WeakMap.set(dom, data)） - 或在回调前判断组件是否存活（如 Vue 的
isMounted、React 的mountedRef.current）
- 改用弱引用缓存（如
- 清理轮询逻辑：
- 把
setInterval(() => fetch().then(...))改为async function poll() { await fetch(); setTimeout(poll, 1000); }，便于主动中断 - 或统一管理定时器 ID，在销毁时
clearTimeout(timerId)
- 把
不复杂但容易忽略。真正的问题往往不在 Promise 有没有 resolve，而在它背后那个本该消失却还亮着灯的闭包。
