Promise and its methods(all, race, any, allSettled

“A promise is an object in JavaScript that represents the outcome of an asynchronous operation, either its success or failure.”

Promise

Three steps to know about promise:

1. Creation: Promises are created using new Promise((resolve, reject) => {...}).
2. Handling: Use .then() to handle successful resolution and .catch() for handling rejections.
3. Chaining: Chain promises using .then() to execute sequential asynchronous operations.

Lets create one promise:

const promise1= new Promise((resolve, reject)=>{
 resolve("promise 1 success");
  //reject("promise 1 reject")
  })

promise1.then((data)=>{
console.log(data)
}).
catch((error)=>{
 console.log(error)
}).finally{
  console.log("finally block");
}

If promise 1 resolves then it goes to .then section and if promise1 got rejected then it goes to .catch section and give the result.
finally will always execute irrespective of the resolve or reject.

How to handle multiple promises:

There is multiple ways to handle multiple promises based on different situations.

• Promise.any
• Promise.race
• Promise.all
• Promise.allSettled

Lets see one by one:

Promise.any

• This method takes an array of promises as input and returns a single promise.
• It will resolve if any of the promises in an array are resolved with the resolved value.
• If all the promises are rejected, promise will be rejected with the error “AggregateError: All promises were rejected”.

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Promise 1 resolved'), 1000);
  });
  
  const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Promise 2 resolved'), 2000);
  });
  
  const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Promise 3 resolved'), 3000);
  });

  Promise.any([promise1, promise2, promise3])
  .then((result) => {
    console.log(result); // Prints the value of the first resolved promise : Promise 1 resolved
  })
  .catch((error) => {
    console.error(error); // Handle error if all promises are rejected
  });

Promise.all

• This method takes an array of promises as input and returns a single promise
• It resolves when all of the promises in the array have resolved, or rejects when any one of the promises rejects.

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Promise 1 resolved'), 1000);
  });
  
  const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Promise 2 resolved'), 2000);
  });
  
  const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Promise 3 resolved'), 3000);
  });

  Promise.all([promise1, promise2, promise3])
  .then((result) => {
    console.log(result); // [ 'Promise 1 resolved', 'Promise 2 resolved', 'Promise 3 resolved' ]
  })
  .catch((error) => {
    console.error(error);
  });

Promise.race

• This method takes an array of promises as input and returns a single promise
• It will return the promise as soon as any of the promises is either resolve or reject.

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => reject('Promise 1 rejected'), 1000);
  });
  
  const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Promise 2 resolved'), 2000);
  });
  
  const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Promise 3 resolved'), 3000);
  });

  Promise.race([promise1, promise2, promise3])
  .then((result) => {
    console.log(result);   // promise 1 rejected
  })
  .catch((error) => {
    console.error(error);
  });

Promise.allSettled

• This method is similar to Promise.all(), but it waits for all promises to settle (either resolve or reject), regardless of their result (resolve or reject).
• It returns an array of objects with the status of each promise.

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Promise 1 rejected'), 1000);
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Promise 2 resolved'), 2000);
});

const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Promise 3 resolved'), 3000);
});

Promise.allSettled([promise1, promise2, promise3])
    .then((data) => {
        console.log(data)
    })

/*
output: 
 [
  { status: 'fulfilled', value: 'Promise 1 rejected' },
  { status: 'fulfilled', value: 'Promise 2 resolved' },
  { status: 'fulfilled', value: 'Promise 3 resolved' }
]
*/

Thanks for reading till here, You can follow me if you like this article regarding promise methods.

You can find me here for any further discussion:

https://www.linkedin.com/in/bittukumar-web/