宇宙厂:为什么前端离不开 Promise.withResolvers() ?
大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发。
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");
// 实例化 Worker
function 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：实例化 Worker
listenForCompletion(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