JavaScript Promise Methods

In JavaScript Promises are part of Asynchronous JavaScript, while a single Promise is great for fetching single piece of data, but in real world we need multiple Promises to execute simultaneously.

Instead of waiting for each Promise to finish, JavaScript provides several methods to handle multiple Promises simultaneously.

Let's understand these methods using the example of Taarak Mehta ka Ooltah Chashmah.

This is the sample dishes I am taking

const kaandePohe = Promise.resolve("Kaande Pohe is ready");
const jalebiFafda = Promise.resolve("Jalebi Fafda is ready");
const dhokla = Promise.resolve("Dhokla is ready");
const burger = Promise.reject("Burger is junk");
const pizza = Promise.reject("Pizza is junk");

In case, if you dont know about these characters, let me introduce them to you
1. Jethalal : He is a businessman, he loves to eat anything good but gets angry when any one the dish is not that he likes and he can eat a lot.

2. Hathi Bhai : He is a Doctor by profession, he eats everything irrespective of junk or healthy, he likes every dish.

3. Bhide : He is the one and only secretary of our society, he can eat any dish healthy or junk but it should be available to him as fast as possible.

4. Champak Chacha : Father of Jethalal, he wants the dish that is fastest to make but is not a junk, as he does not likes to eat junk food.

1. Promise.all()

It is like Jethalal of our society, he wants to eat everything that tastes good to him else he will not be happy and would not want anything that is prepared. Jethalal prefers gujrati dishes and is okay with other dishes also, but he don't want any type of Junk food.

All method in Promises behaves like "All or nothing", formally all method goes through each promise and if every promise is resolved and does not generate an error it will return array of all result, if any promise is rejected it will return the result of first promise that is rejected.

Promise.all([kaandePohe, jalebiFafda, dhokla])
    .then(val => console.log(val))
    .catch(err => console.log(err))

// Output
// [ 'Kaande Pohe is ready', 'Jalebi Fafda is ready', 'Dhokla is ready' ]

Promise.all([kaandePohe, jalebiFafda, dhokla, burger, pizza])
    .then(val => console.log(val))
    .catch(err => console.log(err))

// Output
// Prints Burger is Ready (1st reject statement)

1. Promise.allSettled()

It is like Dr. Hathi Bhai of our society, he needs everything irrespective of its food type, whether it is prepared well or not, whether it is healthy or not. He wants to eat everything and provides feedback for every dish. He never rejects the collective Dish.

This method waits for all promises to finish, irrespective of whether they succeed or gets failed. It never rejects the collective promise and it returns an array of objects describing outcome of each promise.

Promise.allSettled([kaandePohe, jalebiFafda, dhokla, burger, pizza])
    .then(val => console.log(val))
    .catch(err => console.log(err))

/* Output
 [
  { status: 'fulfilled', value: 'Kaande Pohe is ready' },
  { status: 'fulfilled', value: 'Jalebi Fafda is ready' },
  { status: 'fulfilled', value: 'Dhokla is ready' },
  { status: 'rejected', reason: 'Burger is junk' },
  { status: 'rejected', reason: 'Pizza is junk' }
]
*/

1. Promise.race()

It is like Bhide of our society, he wants everything fast and on time, any dish that gets prepared fastest works for him. Quality and taste don't matter to him, it mirrors the object of very first dish that is prepared.

From all the input promises the fastest promise to either it gets resolve or rejected is selected, in our case kaande pohe will be selected as it prepares in least time among the others. And as we know Bhide is stingy (kanjoos) so he learns how to prepare the fastest one dish, that is it copies the object of fastest promise.

const kaandePohe = new Promise((res) => setTimeout(() => res("Kaande Pohe is ready"), 1000));
const jalebiFafda = new Promise((res) => setTimeout(() => res("Jalebi Fafda is ready"), 2000));
const burger = new Promise((_, rej) => setTimeout(() => rej("Burger is junk"), 500));
const pizza = new Promise((_, rej) => setTimeout(() => rej("Pizza is junk"), 800));

Promise.race([kaandePohe, jalebiFafda, burger, pizza])
    .then(console.log)
    .catch(console.log)

// Output
// Burger is junk

1. Promise.any()

This method is like the Champak Chacha of our society, he wants anything that is good and healthy, means he doesn't considers rejection, if every dish is not good it throws an Aggregate Error.

Any is more selective it only selects the first successful resolve, in this case Champak chacha selects kaande pohe as it is the fastest one to get resolved.

const kaandePohe = new Promise((res) => setTimeout(() => res("Kaande Pohe is ready"), 1000));
const jalebiFafda = new Promise((res) => setTimeout(() => res("Jalebi Fafda is ready"), 2000));
const burger = new Promise((_, rej) => setTimeout(() => rej("Burger is junk"), 500));
const pizza = new Promise((_, rej) => setTimeout(() => rej("Pizza is junk"), 800));

Promise.race([kaandePohe, jalebiFafda, burger, pizza])
    .then(console.log)
    .catch(console.log)

// Output
// Kaande Pohe is ready

Summary

These all methods are used along multiple use cases for handling multiple promises simultaneously.