Promise: all and allSettled

Promises… How long can one hold on to such promises? Nonetheless, this short blog refers to promises in JavaScript. There are two static methods from the Promise object that are used to handle multiple promise instances that resolves to an array of values. These methods are useful for validating and aggregating promise results.

Promise all

Promise.all() is a static method that takes an array of promises and returns a single promise that contains the results. It can fail-fast in case any of the iterable promises get rejected. It is ideal for coordinating related and dependent asynchronous tasks that require proper completion.

const delayedPromise = new Promise((res, rej) => {
    setTimeout(() => res("promise delayed"), 1000)
})

const promises = [Promise.resolve("success"), Promise.reject("failed"), delayedPromise]

async function promiseHandler() {
  const promisesResult = await Promise.all(promises)

  console.log(promisesResult)
}

promiseHandler()

The given code block above has an array of promises that resolve and reject immediately, while the last element is a delayed promise. The async promise handler awaits the execution of the promises through the all method.

Looking at the code, would the handler log the result? It returns an empty result and halts the execution of the proceeding statements due to an exception.

Although the result of the first rejected promise can be accessed through a catch function with an error-first callback or using a try-catch block. 

await Promise.all(promises).catch((err) => console.log(err)) 

try {
    await Promise.all(promises)
} catch(err) {
    console.log(err) // Output: failed
}

Promise allSettled

Promise.allSettled() is a counterpart of the all method without a fast-fail mechanism. It is ideal for settling non-dependent promises and having access to the result of each promise, which was not previously possible.

async function promiseHandler() {
  const promisesResult = await Promise.allSettled(promises)

  console.log(promisesResult) // Output: [object, object, object]
}

The result differs since it returns an object. The object has three properties regarding the result of each promise. The code block below shows the type structure through typescript and the actual output:

{
    status: string, // whether the promise is "fulfilled" or "rejected"
    value?: string, // the fulfilled value (optional)
    reason?: string //the rejection reason (optional)
}

[
  { status: 'fulfilled', value: "success" },
  { status: 'rejected', reason: Error: failed },
  { status: 'fulfilled', value: "promised delayed" }
]

To fulfill or not to reject

Choosing the right method can depend on the use case and scenario. There are cases where handling each promise is better than processing them all at once, it really depends honestly since it provides different way of handling rejected promises and how the result is presented. One thing is for sure, always fulfill your promises and never reject one, joking aside.