promise.withresolvers()直接返回promise、resolve、reject三元组，解决传统闭包暴露、作用域污染、逻辑耦合三大问题，支持事件监听、超时控制、测试mock等场景，但需注意单次调用、引用保存及兼容性。
直接用 Promise.withResolvers() 获取配对的 promise、resolve 和 reject，就能在外部任意位置触发状态变更，不用再靠闭包暴露或临时变量中转。
解决传统写法的三个硬伤
以前想外部控制 Promise，得这样绕：
- 先声明空的
let resolve, reject，再在new Promise内赋值——容易漏写、顺序错乱 - resolve/reject 被挂到对象属性或全局变量上——污染作用域，多处调用易冲突
- 多个异步任务共用一套 resolve/reject 变量——逻辑耦合，难以复用和测试
典型使用场景与写法
核心是“解构即用”，不依赖闭包传递：
-
事件监听封装：给
addEventListener绑定once: true的回调，触发后直接resolve -
超时控制：搭配
setTimeout，时间到未完成就reject错误 -
测试 mock：单元测试里不启动真实异步流程，直接调用
resolve或reject模拟结果 -
手动队列调度：比如实现一个可暂停/恢复的异步任务队列，每个任务用独立的
withResolvers控制完成时机
关键注意事项
它不是万能语法糖，用错反而更难调试：
- resolve/reject 只能调用一次，后续调用会被忽略（不报错），但状态已锁定——务必确保只触发一次
- 返回的
resolve和reject必须和promise成套保存，丢掉任一引用就无法控制 - 如果在
try/catch外部调用reject且没接.catch，会抛出未捕获的 rejection 异常 - 浏览器兼容性有限：Chrome 121+、Firefox 126+、Node.js 21.7+ 支持；Safari 尚未支持，生产环境需降级兜底
简单对比：旧写法 vs 新写法
加载图片的封装：
// 旧写法：闭包 + 外部变量
function loadImage(url) {
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
const img = new Image();
img.src = url;
img.onload = () => resolve(img);
img.onerror = (e) => reject(e);
return promise;
}
// 新写法：解构即用，扁平清晰
function loadImage(url) {
const { promise, resolve, reject } = Promise.withResolvers();
const img = new Image();
img.src = url;
img.onload = () => resolve(img);
img.onerror = (e) => reject(e);
return promise;
}
