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

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