在JavaScript中，Promise一直是处理异步操作的核心工具。然而，随着ES2025的引入，Promise又迎来了一项强大的新特性——Promise.withResolvers()。这个方法不仅让Promise的使用更加灵活，还极大地简化了代码的复杂度。今天，我们将深入探讨Promise.withResolvers()，看看它是如何改变前端开发的。

一、为什么需要Promise.withResolvers()？

在JavaScript中，Promise的构造函数非常常用，但它的使用方式有时会限制开发者的灵活性。例如，Promise的resolve或reject的时间取决于构造Promise时提供的执行器函数体。这在大多数情况下没有问题，但有时开发者可能希望从构造函数外部resolve或reject一个Promise。传统的解决方法是将resolve和reject函数分配给外部变量，但这会让代码显得冗长且难以维护。

let outerResolve;
let outerReject;
const promise = new Promise((resolve, reject) => {
  outerResolve = resolve;
  outerReject = reject;
});

Promise.withResolvers()提供了一种更优雅的解决方案，它返回一个对象，包含一个新的Promise对象和两个用于resolve或reject的函数，这些函数与特定的Promise绑定，可以在任何位置调用且不受构造函数的约束。

二、Promise.withResolvers()的使用方法

Promise.withResolvers()的使用非常简单，它返回一个包含promise、resolve和reject的对象。以下是一个基本示例：

const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => {
  if (Math.random() < 0.5) {
    resolve("Resolved!");
  } else {
    reject("Rejected!");
  }
}, 1000);

promise
  .then((resolvedValue) => {
    console.log(resolvedValue);
  })
  .catch((rejectedValue) => {
    console.error(rejectedValue);
  });

三、Promise.withResolvers()的典型用例

1.精简Promise构造函数

在处理复杂的异步逻辑时，Promise.withResolvers()可以帮助我们精简代码，使其更易于阅读和维护。例如，在处理Web Worker的实例化逻辑时，我们可以将逻辑拆分为多个函数，而不是将所有内容塞入Promise构造函数中。

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", (e) => {
    resolve(e.data);
  });
  worker.addEventListener("error", (e) => {
    reject(e.data);
  });
  worker.addEventListener("messageerror", (e) => {
    reject(e.data);
  });
  return promise;
}

const job = triggerJob();
listenForCompletion(job)
  .then((result) => {
    console.log("Success!");
  })
  .catch((reason) => {
    console.error("Failed!");
  });

2.等待用户操作

在处理用户交互时，Promise.withResolvers()可以用来集中处理用户的操作，同时保持代码的简洁性。

const { promise, resolve, reject } = Promise.withResolvers();

reviewButton.addEventListener("click", () => dialog.show());
rejectButton.addEventListener("click", reject);
approveButton.addEventListener("click", resolve);

promise
  .then(() => {
    console.log("Approved!");
  })
  .catch(() => {
    console.log("Rejected!");
  })
  .finally(() => {
    dialog.close();
  });

3.减少函数嵌套

在处理防抖逻辑时，Promise.withResolvers()可以帮助我们减少函数嵌套，使代码更加清晰。

function asyncDebounce(callback) {
  let timeout = null;
  let resolve, reject, promise;
  return function (...args) {
    reject?.("rejected_pending");
    clearTimeout(timeout);
    ({ promise, resolve, reject } = Promise.withResolvers());
    timeout = setTimeout(() => {
      resolve(callback.apply(this, args));
    }, 500);
    return promise;
  };
}

input.addEventListener("keyup", async (e) => {
  try {
    const results = await debouncedSearch(e.target.value);
    appendResults(results);
  } catch (e) {
    if (e !== "rejected_pending") {
      throw e;
    }
  }
});

四、Promise.withResolvers()的优势

0. 灵活性：可以在任何位置调用resolve和reject，不受Promise构造函数的约束。
1. 代码简洁：减少了外部变量的使用，使代码更加清晰和易于维护。
2. 功能强大：适用于多种场景，包括Web Worker、用户交互、防抖逻辑等。

五、总结

Promise.withResolvers()是一个非常强大的工具，它不仅让Promise的使用更加灵活，还极大地简化了代码的复杂度。通过将resolve和reject函数与Promise绑定，开发者可以在任何位置调用这些函数，而不受构造函数的限制。这使得代码更加简洁、易于阅读和维护。如果你还没有尝试过Promise.withResolvers()，不妨在你的项目中试一试，它可能会成为你的新宠。