大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发。

1. 为什么需要 Promise.withResolvers()

JavaScript 中 Promise 的构造函数非常常用，Promise 的 resolve 或 reject 的时间取决于构造 Promise 时提供的执行器函数体。比如下面的示例：

const promise = new Promise((resolve, reject) => { // 构造器函数决定 resolve/reject 时间 setTimeout(() => { if (Math.random() < 0.5) { resolve("Resolved!"); } else { reject("Rejected!"); } }, 1000);});promise .then((resolvedValue) => { console.log(resolvedValue); }) .catch((rejectedValue) => { console.error(rejectedValue); });

Promise API 的设计一定程度上决定了开发者构造异步代码的方式，例如：如果使用的是 Promise，则需要同意其拥有该代码的执行权。

大多数情况下没啥问题，但有时开发者却想要从构造函数外部 resolve 或 reject 一个 Promise。此时，一个常见的做法就是将 resolve、reject 函数分配给外部的变量。

let outerResolve;let outerReject;// 外部变量const promise = new Promise((resolve, reject) => { outerResolve = resolve; outerReject = reject;});// 此时可以从 Promise 函数体外部修改 Promise 的状态setTimeout(() => { if (Math.random() < 0.5) { outerResolve("Resolved!"); } else { outerReject("Rejected!"); }}, 1000);// 添加 then、catch 等成功失败回调promise .then((resolvedValue) => { console.log(resolvedValue); }) .catch((rejectedValue) => { console.error(rejectedValue); });

这种方法虽然可以实现从 Promise 函数体外部修改 Promise 的状态，但是代码却显得蹩脚。

2. Promise.withResolvers() 是更灵活的 resolve Promise 的方式

Promise.withResolvers() 静态方法返回一个对象，包含一个新的 Promise 对象和两个用于 resolve 或 reject 的函数，对应于传递给 Promise() 构造函数的执行器的两个参数。

const {promise, resolve, reject} = Promise.withResolvers();// 可以随时修改 Promise 状态setTimeout(() => { if (Math.random() < 0.5) { resolve("Resolved!"); } else { reject("Rejected!"); }}, 1000);// 添加 then、catch 等成功失败回调promise .then((resolvedValue) => { console.log(resolvedValue); }) .catch((rejectedValue) => { console.error(rejectedValue); });

由于来自同一个对象，resolve() 和 reject() 函数与该特定 Promise 绑定，这意味着开发者可以在任何位置调用且不受构造函数的约束。

Promise.withResolvers() 与下面的代码等价：

let resolve, reject;const promise = new Promise((res, rej) => { resolve = res; reject = rej;});3.Promise.withResolvers() 的典型用例3.1 用于精简 Promise 构造函数

下面示例开发者使用 Promise 来处理 Web Worker 的实例化逻辑，同时监听三个事件，即：message, error 和 messageerror。

const worker = new Worker("/path/to/worker.js");// 实例化 Workerfunction triggerJob() { return new Promise((resolve, reject) => { worker.postMessage("begin job"); worker.addEventListener("message", function (e) { resolve(e.data); }); worker.addEventListener("error", function (e) { reject(e.data); }); worker.addEventListener("messageerror", function (e) { reject(e.data); }); });}// 通过 Promise 实例化 Worker 逻辑triggerJob() .then((result) => { console.log("Success!"); }) .catch((reason) => { console.error("Failed!"); });

该方法的缺点是在 Promise 构造函数中塞入了太多内容，很难阅读。如果使用 Promise.withResolvers() 则可以轻松化解：

const worker = new Worker("/path/to/worker.js");function triggerJob() { worker.postMessage("begin job"); return Promise.withResolvers();}function listenForCompletion({resolve, reject, promise}) { worker.addEventListener("message", function (e) { resolve(e.data); }); worker.addEventListener("error", function (e) { reject(e.data); }); worker.addEventListener("messageerror", function (e) { reject(e.data); }); return promise;}const job = triggerJob();// 拆分逻辑 1：实例化 WorkerlistenForCompletion(job)// 拆分逻辑 2：监听 Worker 事件 .then((result) => { console.log("Success!"); }) .catch((reason) => { console.error("Failed!"); });

此时 triggerJob() 只是触发作业，并没有进行构造函数填充。单元测试也更容易，因为函数的目的更明确，副作用更少。

3.2 Promise.withResolvers() 用于等待用户操作

假设开发者想用一个 <dialog> 组件提示用户查看新的评论。当用户打开对话框时，会出现 “批准” 和 “拒绝” 按钮，如果不使用 Promise 则可以如下做：

reviewButton.addEventListener("click", () => dialog.show());rejectButton.addEventListener("click", () => { // 处理 reject dialog.close();});approveButton.addEventListener("click", () => { // 处理同意 dialog.close();});

但实际上，开发者可以选择使用 Promise 来集中处理部分事件，同时保持代码相对扁平：

const {promise, resolve, reject} = Promise.withResolvers();reviewButton.addEventListener("click", () => dialog.show());rejectButton.addEventListener("click", reject);approveButton.addEventListener("click", resolve);promise.then(() => { // 处理同意逻辑 }).catch(() => { // 处理拒绝逻辑 }).finally(() => { // finally 无论如何都会执行 dialog.close(); });3.3 Promise.withResolvers() 减少函数嵌套

在对耗时函数进行防抖时，通常会看到所有内容都包含在单个函数中且不返回任何值，例如：实时搜索表单的请求和 UI 更新都可能在同一个调用中处理。

function debounce(func) { let timer; return function (...args) { clearTimeout(timer); // 先清除多余逻辑，用最新一个请求 timer = setTimeout(() => { func.apply(this, args); }, 1000); };}const debouncedHandleSearch = debounce(async function (query) { // 逻辑 1：请求数据 const results = await search(query); // 逻辑 2：更新界面 UI updateResultsList(results);});// 处理 Input 控件逻辑input.addEventListener("keyup", function (e) { debouncedHandleSearch(e.target.value);});

但是实际上，开发者应尽量避免将 UI 更新与异步请求混为一谈。此时可以选择使用下面的 asyncDebounce 方法，从而将两部分逻辑拆分出来并单独处理：

function asyncDebounce(callback) { let timeout = null; let reject = null; return function (...args) { reject?.("rejected_pending"); // 直接 reject 给外部函数处理 UI clearTimeout(timeout); return new Promise((res, rej) => { reject = rej; // 处理 resolve 逻辑 timeout = setTimeout(() => { res(callback.apply(this, args)); }, 500); }); };}

但是该方法的缺点是嵌套层级非常深且需要单独使用变量保存 reject 函数，而使用 Promise.withResolvers() 代码则清晰的多：

function asyncDebounce(callback) { let timeout = null; let resolve, reject, promise; return function (...args) { reject?.("rejected_pending"); clearTimeout(timeout); // 直接使用 Promise.withResolvers() 取代 new Promise() ({promise, resolve, reject} = Promise.withResolvers()); // setTimeout 后的 resolve 逻辑 timeout = setTimeout(() => { resolve(callback.apply(this, args)); }, 500); return promise; };}

通过将数据请求和 UI 更新逻辑分离后，开发者就可以通过下面的方式更新 UI 并丢弃被 reject 的调用：

input.addEventListener("keyup", async function (e) { try { const results = await debouncedSearch(e.target.value); appendResults(results); } catch (e) { // 丢弃掉被取消的调用，但是其他异常依然抛出 if (e !== "rejected_pending") { throw e; } }});3.4 将 Stream 流转换为异步可迭代对象

以下示例将 Node.js 可读流转换为异步可迭代对象，此时的每个 Promise 都代表一批可用数据。每次读取当前批次时，都会为下一批数据创建一个新的 Promise。请注意，事件侦听器仅附加一次，但实际上每次都会调用不同版本的 resolve 和 reject 函数。

// async 函数和 generator 函数一起使用async function* readableToAsyncIterable(stream) { let {promise, resolve, reject} = Promise.withResolvers(); stream.on("error", (error) => reject(error)); stream.on("end", () => resolve()); stream.on("readable", () => resolve()); // 读取到数据后就 resolve，则后面的 await promise 继续执行 while (stream.readable) { await promise; let chunk; while ((chunk = stream.read())) { // 动态生成 yield yield chunk; } ({promise, resolve, reject} = Promise.withResolvers()); }}3.5 在非 Promise 构造函数上调用 withResolvers()

Promise.withResolvers() 是一个通用方法，可以在任何 实现与 Promise() 构造函数相同签名 的构造函数上调用。例如，可以在将 console.log 作为 resolve 和 rejection 函数传递给执行器的构造函数上调用它：

class NotPromise { constructor(executor) { // The "resolve" and "reject" functions behave nothing like the native // promise's, but Promise.withResolvers() just returns them, as is. executor( (value) => console.log("Resolved", value), (reason) => console.log("Rejected", reason), ); }}const {promise, resolve, reject} = Promise.withResolvers.call(NotPromise);resolve("hello");// 打印结果: Resolved hello参考资料

https://frontendmasters.com/blog/control-javascript-promises-from-anywhere-using-promise-withresolvers/?ref=cms.macarthur.me

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers

https://dev.to/bgdnvarlamov/enhancing-javascript-with-promisewithresolvers-3nlm

https://zhuanlan.zhihu.com/p/700702652

https://medium.com/coding-beauty/javascript-resolve-promise-from-outside-e6c6f64c6717