All About A Promise

A Promise is an object representing the eventual completion or failure of an asynchronous operation. Using basic new Promise() can handle a single asynchronous event most of the time, but when needing to handle multiple asynchronous events, there are several promsie methods that can be used in different situations.

1. Pending: Initial state, neither fulfilled nor rejected.
2. Fulfilled: Operation completed successfully.
3. Rejected: Operation failed.

Basic Syntax

• “resolve” is called when the asynchronous operation is successful.
• “reject” is called when the asynchronous operation fails.

How to use Promise result

1. Chaining then & catch

• .then(result => {...}) is executed if the Promise is fulfilled.
• .catch(error => {...}) is executed if the Promise is rejected.

1. async & await

• async function is a function that returns a Promise.
• await keyword is used inside an async function to pause the execution of the function until a Promise is resolved or rejected. It can only be used an async function.
• By using try ... catch block, we can handle errors that may occur during the asynchronous operation.

1. finally

Often time, we need last step either a Promise is fulfilled or rejected. In that case, we can use finally at the end of the operation. It immediately returns an equivalent Promise obeject, allowing you to chain calls to other promise methods.

Promise.all() allows you to run multiple promises in parallel and wait until either all of them are resolved or any of them is rejected. This is useful for situations where you need to run multiple asynchronous operation concurrently and procceed only when all of them are completed.

Basic Syntax

Promise.allSettled() is a method is JavaScript that allows you to run multiple promises in parallel and returns a single Promise like Promise.all() , but there are some differences between them.

Difference between Promise.all() and Promise.allSettled()

1. Resolution Behavior

If any of the promises rejects, Promise.all() returns immediately with the first promise that rejected. On the other hand, Promise.allSettled() waits until all Promises to settle, either it’s resolved or rejected.

1. Return Value

Promise.all() resolves to an array of the resolved values. If any promise rejects, it rejects with the reason of the first rejected promise. On the other hand, Promise.allSettled() resolves to an array of objects representing the outcome of each promise, with each object having status (”fullfied” or "rejected") and either a value (if fulfilled) or reason (if rejected).

Basic Syntax

Promise.any() is a method in JavaScript that takes an iterable of promises and returns a single promise. It returns a promise as soon as any of the input promises resolves. If all input promises rejected, it returns a rejected promise with an AggregateError.

Basic Syntax

When all promises are rejected,

Promise.race() is a method in JavaScript that takes a iterable of promises and returns a single promise as soon as one of the input promises is settled, either fulfilled or rejected.

A key difference between Promise.any() and Promise.race() is the way of handling errors. Promise.any() returns AggregateError when all promises are rejected and the error contains all errors. On the other hands, Promise.race() returns a rejected Promise when the result of the first settled promise is reject.

Basic Syntax

This method is the one I wanted to share the most because it has recently become available in major browsers in 2024.

The Promise.withResolvers() is exactly the same as new Promise((resovle, reject) => {}) but can handle Promise in a cleaner and more concise way.

Basic Syntax

Compare to handle Promise in a traditional way

As you can see, using Promise.withResolverse() reduces nesting and improves the readability and management of the code. Also, it becomes handy where the resolution and rejection logic needs to be decoupled from the promise creation.