promise.withresolvers 不是浏览器标准api，截至2024年中仅node.js 21+实验支持；浏览器中需用createdeferred等手动模拟方案。
Promise.withResolvers 在 HTML 中根本不能用
它不是浏览器标准 API，目前（截至 2024 年中）仅存在于 Node.js 21+ 的实验性功能中，且需显式启用 --enable-experimental-feature=promise-with-resolvers。所有主流浏览器（Chrome、Firefox、Safari、Edge）均未实现 Promise.withResolvers，在 HTML 页面的 <script></script> 中直接调用会抛出 TypeError: Promise.withResolvers is not a function。
替代方案：手动构造可外部 resolve/reject 的 Promise
你需要自己模拟 withResolvers 行为。核心是声明两个变量，把 resolve 和 reject 函数提前“抽出来”，再传给 new Promise 构造器：
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
// 后续任意位置可调用
resolve('done');
// 或 reject(new Error('oops'));
常见使用场景包括：封装事件监听（如按钮点击后才 resolve）、超时控制、跨函数传递控制权。
- 必须确保
resolve/reject被赋值后再使用，否则调用会报TypeError: Cannot read property 'call' of undefined - 不要重复调用
resolve或reject—— Promise 状态一旦改变就不可逆，后续调用会被静默忽略 - 若需多次触发逻辑，应改用
EventTarget或Observable，而非 Promise
更安全的封装：写一个 polyfill 风格的工具函数
为避免全局变量污染和调用时机风险，建议封装成函数返回对象：
function createDeferred() {
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
return { promise, resolve, reject };
}
// 使用
const { promise, resolve, reject } = createDeferred();
button.addEventListener('click', () => resolve('clicked'));
promise.then(console.log);
这个模式在 Axios 源码、Vue 的 nextTick 实现、以及大量手写异步桥接逻辑中广泛存在。
- 返回的
resolve和reject是普通函数，可自由传递、绑定上下文、节流或包装 - 注意内存泄漏风险：如果
promise长时间不被消费（无.then/.catch），而resolve/reject又被闭包持有，可能阻碍 GC - 该函数在所有环境（含 IE11）都可用，兼容性远超原生
Promise.withResolvers
为什么别等浏览器支持？
TC39 提案仍处于 Stage 2（draft），规范细节未冻结，浏览器厂商态度谨慎。即使未来加入，也要考虑旧版本兼容 —— 所以生产环境直接依赖它风险极高。真正需要“外部可控 Promise”时，createDeferred() 这种几行代码的模式，比等待一个不确定何时落地的 API 更可靠、更易调试、也更容易加类型注解（TypeScript 下可精确标注返回类型）。
最常被忽略的一点：很多人试图在模块顶层立即解构 resolve，却忘了 Promise 构造器回调是异步执行的，导致解构出 undefined —— 务必在构造器内部完成赋值，或像上面那样用函数封装来保证顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
