Enhancing JavaScript with Promise.withResolvers()

Since March 2024, Promise.withResolvers() has been supported across the latest devices and browsers. This feature introduces a static method that returns an object containing a new Promise and two functions to either resolve or reject it.

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

This method provides an alternative to the traditional new Promise() constructor. It is especially useful in scenarios where the logic to resolve or reject the promise doesn't fit neatly into a single function.

Simple Example

Imagine you want to create a promise that resolves when a user clicks a button. Typically, you might set up an event listener inside a promise executor. However, with Promise.withResolvers(), you can streamline the process:

<button id="myButton">Click Me!</button>
<script>
    const { promise, resolve, reject } = Promise.withResolvers();

    document.getElementById("myButton").addEventListener('click', () => {
        resolve("Button clicked!");
    });

    promise.then(alert).catch(console.error);
</script>

In contrast, here's how you might handle it with a standard Promise constructor:

<button id="myButton">Click Me!</button>
<script>
    function waitForButtonClick() {
        return new Promise((resolve, reject) => {
            document.getElementById("myButton").addEventListener('click', () => {
                resolve("Button clicked!");
            });
        });
    }

    waitForButtonClick().then(alert).catch(console.error);
</script>

Comparing Approaches

Encapsulation: The traditional approach encapsulates the promise creation and event handling logic within a single function. This can be restrictive if multiple conditions or different parts of your code need to resolve or reject the promise.
Flexibility: Promise.withResolvers() offers greater flexibility by separating the creation of the promise from the resolution logic, which is ideal for managing complex conditions or multiple events.
Code Management: For straightforward use cases, the traditional method may be simpler, particularly for those familiar with standard promise patterns.

Good case to use `Promise.withResolvers()`

Promise.withResolvers() shines in scenarios like game development or interactive applications where outcomes are influenced by multiple, unpredictable events. For example, in a game, actions such as "win," "lose," or "timeout" might determine the next steps.

Why Promise.withResolvers() is Optimal:

Decoupling Event Handling: It allows separate definition of resolution mechanisms from the event monitoring, improving code organization and management of complex conditions.
Reusable Logic: The resolve and reject functions can be reused across different game scenarios, enabling flexible handling of various outcomes like winning, losing, or pausing.
Simplified State Management: It makes managing asynchronous state transitions cleaner by separating the transitions from the handling logic.

Example

<button id="winButton">Win</button>
<button id="loseButton">Lose</button>
<button id="timeoutButton">Timeout</button>
<script>
    const { promise, resolve, reject } = Promise.withResolvers();

    document.getElementById("winButton").addEventListener('click', () => resolve("Win"));
    document.getElementById("loseButton").addEventListener('click', () => resolve("Lose"));
    document.getElementById("timeoutButton").addEventListener('click', () => reject("Timeout"));

    promise.then(result => {
        console.log("Game Over: " + result);
    }).catch(error => {
        console.log("Game Over: " + error);
    });
</script>

This example illustrates how Promise.withResolvers() effectively manages multiple potential outcomes in an interactive setting, cleanly separating the game logic from the event handling.