2024 Promise 最新 api：Promise.withResolvers避免在 promise 执行器中嵌套，

如果您已经在 Web 平台上开发了足够长的时间，您可能还记得 jQuery.Deferred() 或 bluebird Promise.defer() 。也许您过去使用过 p-defer 包，或者自己实现过类似下面的代码？

原文：If you have been building for the Web platform long enough, you may remember jQuery.Deferred() or bluebird Promise.defer(). Maybe you used p-defer package in the past or implemented something like the code below yourself?

let resolve, reject;

const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

Math.random() > 0.5 ? resolve("ok") : reject("not ok");

不再需要这种方式了。 Promise.withResolvers() 将成为即将到来的 ECMAScript 2024 的一部分，因为这个提案最近达到了第 4 阶段。下面的代码片段是上面代码的等效物。

原文：No need for this dance anymore. The Promise.withResolvers() will be part of the upcoming ECMAScript 2024, as this proposal recently reached stage 4. The snippet below is an equivalent of the code above.

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

Math.random() > 0.5 ? resolve("ok") : reject("not ok");

Promise.withResolvers 使用场景

你可以使用它来避免在 promise 执行器中嵌套，尽管当你需要将 resolve 或 reject 传递给多个调用者时，它表现得更加出色。在流或基于事件的系统中工作是简化你的生活并使用 Promise.withResolvers() 的绝佳机会。

原文： You can use it to avoid nesting in the promise executor, although it shines when you need to pass resolve or reject to multiple callers. Working with stream or event-based systems is an excellent opportunity to simplify your life with Promise.withResolvers().

看看这个 createEventsAggregator 的例子。它返回一个 add 方法来推送新事件和一个 abort 方法来取消聚合。最重要的是，它返回一个 events ，当达到 eventsCount 限制时解决，或者当 abort 被触发时拒绝。

原文：Look at this example of a createEventsAggregator. It returns an add method to push new event and an abort method that cancels aggregation. Most importantly, it returns events promise that resolves when it hits an eventsCount limit or rejects when abort is triggered.

function createEventsAggregator(eventsCount) {
  const events = [];
  const { promise, resolve, reject } = Promise.withResolvers();

  return {
    add: (event) => {
      if (events.length < eventsCount) events.push(event);
      if (events.length === eventsCount) resolve(events);
    },
    abort: () => reject("Events aggregation aborted."),
    events: promise,
  };
}

const eventsAggregator = createEventsAggregator(3);

eventsAggregator.events
  .then((events) => console.log("Resolved:", events))
  .catch((reason) => console.error("Rejected:", reason));

eventsAggregator.add("event-one");
eventsAggregator.add("event-two");
eventsAggregator.add("event-three");

// Resolved: [ "event-one", "event-two", "event-three" ]

const eventsAggregator = createEventsAggregator(3);

eventsAggregator.events
  .then((events) => console.log("Resolved:", events))
  .catch((reason) => console.error("Rejected:", reason));

eventsAggregator.add("event-one");
eventsAggregator.abort();
eventsAggregator.add("event-two");
eventsAggregator.add("event-three");

// Rejected: Events aggregation aborted.

我希望这个例子能帮助你理解延迟 Promise 的价值以及如何在你的项目中利用这种模式。下次见，保持好奇 ✌️

原文： I hope this example helps you understand the value of deferred promises and how to take advantage of this pattern in your projects. Until next time, stay curious ✌️