loading...

Important Methods provided by Promise API

myogeshchavan97 profile image Yogesh Chavan Updated on ・4 min read

Introduction

This is the continuation of the multi-part series. If you missed the previous parts, then you can check out here 👉 : part 1 and part 2

In this part, we'll explore the various methods provided by Promise API.

Promise.all

This method is used to execute multiple asynchronous tasks simultaneously without having to wait for another task to finish.

Suppose, we've three promises and all are resolved successfully.

const promise1 = new Promise((resolve, reject) => resolve("promise1 success"));
const promise2 = new Promise((resolve, reject) => resolve("promise2 success"));
const promise3 = new Promise((resolve, reject) => resolve("promise3 success"));
Enter fullscreen mode Exit fullscreen mode

Now, let's use Promise.all.

Promise.all([promise1, promise2, promise3])
 .then((result) => {
  console.log('resolved',result); // resolved ["promise1 success", "promise2 success", "promise3 success"]
 })
 .catch((error) => {
  console.log('rejected', error);
 });
Enter fullscreen mode Exit fullscreen mode

Promise.all

As all the promises are resolved, result will be an array containing the results of resolved promises.

Now, what if any of the promise gets rejected.

const promise1 = new Promise((resolve, reject) => resolve("promise1 success"));
const promise2 = new Promise((resolve, reject) => reject("promise2 failure"));
const promise3 = new Promise((resolve, reject) => resolve("promise3 success"));

Promise.all([promise1, promise2, promise3])
 .then((result) => {
  console.log('resolved', result);
 })
 .catch((error) => {
  console.log('rejected', error); // rejected promise2 failure
 });
Enter fullscreen mode Exit fullscreen mode

Promise.all

In the above code, promise2 is rejected so catch handler will be executed, and in the case of Promise.all

  • If one of the promise is rejected, the error will contain the error message or the failed promise (as in our case above)
  • If multiple promises are rejected, the error will be the error message of the first failed promise.

Note: Even though the intermediate promise gets rejected, all next promises will not be stopped from executing. They all will be executed but only the first rejected promise value will be available in the error parameter of the catch block.

Promise.race

Consider again the three resolved promises.

const promise1 = new Promise((resolve, reject) => resolve("promise1 success"));
const promise2 = new Promise((resolve, reject) => resolve("promise2 success"));
const promise3 = new Promise((resolve, reject) => resolve("promise3 success"));

Promise.race([promise1, promise2, promise3])
 .then((result) => {
  console.log('resolved',result); // resolved promise1 success
 })
 .catch((error) => {
  console.log('rejected', error);
 });
Enter fullscreen mode Exit fullscreen mode

Promise.race

When we use Promise.race, it will wait until the first promise to get resolved or rejected and

  • If the first promise in the promise chain gets resolved, .then handler will be executed and the result will be the result of the first resolved promise
  • If the first promise in the promise chain gets rejected, .catch handler will be executed and the result will be the result of the first failed promise
const promise1 = new Promise((resolve, reject) => reject("promise1 failure"));
const promise2 = new Promise((resolve, reject) => resolve("promise2 success"));
const promise3 = new Promise((resolve, reject) => resolve("promise3 success"));

Promise.race([promise1, promise2, promise3])
 .then((result) => {
  console.log('resolved',result);
 })
 .catch((error) => {
  console.log('rejected', error); // rejected promise1 failure
 });
Enter fullscreen mode Exit fullscreen mode

Promise.race

As you can see here, the first promise itself is rejected so the .catch handler will be executed.

Promise.allSettled

This method is useful when you want to execute multiple asynchronous tasks that are not dependent on each other or when you want to know the result of each task even though they are rejected.

Because in Promise.all, we get only the result of the first rejected promise.

const promise1 = new Promise((resolve, reject) => resolve("promise1 success"));
const promise2 = new Promise((resolve, reject) => resolve("promise2 success"));
const promise3 = new Promise((resolve, reject) => resolve("promise3 success"));

Promise.allSettled([promise1, promise2, promise3])
 .then((result) => {
  console.log('resolved',result);
 });

/* output from `.then`:
resolved [
  {
    "status": "fulfilled",
    "value": "promise1 success"
  },
  {
    "status": "fulfilled",
    "value": "promise2 success"
  },
  {
    "status": "fulfilled",
    "value": "promise3 success"
  }
]
*/
Enter fullscreen mode Exit fullscreen mode

Promose.allSettled

As you can see, the Promise.allSettled method waits until all the promises are resolved or rejected and the result will contain the result of each promise.

const promise1 = new Promise((resolve, reject) => reject("promise1 failure"));
const promise2 = new Promise((resolve, reject) => resolve("promise2 success"));
const promise3 = new Promise((resolve, reject) => resolve("promise3 success"));

Promise.allSettled([promise1, promise2, promise3])
 .then((result) => {
  console.log('resolved',result);
 });

/* output from `.then`:
resolved [
  {
    "status": "rejected",
    "reason": "promise1 failure"
  },
  {
    "status": "fulfilled",
    "value": "promise2 success"
  },
  {
    "status": "fulfilled",
    "value": "promise3 success"
  }
]
*/
Enter fullscreen mode Exit fullscreen mode

Promise.allSettled

In this case, even though the first promise is rejected, we get the result of all the promises inside the .then handler

const promise1 = new Promise((resolve, reject) => reject("promise1 failure"));
const promise2 = new Promise((resolve, reject) => reject("promise2 failure"));
const promise3 = new Promise((resolve, reject) => reject("promise3 failure"));

Promise.allSettled([promise1, promise2, promise3])
 .then((result) => {
  console.log('resolved',result);
 });

/* output from `.then`:
 resolved [
  {
    "status": "rejected",
    "reason": "promise1 failure"
  },
  {
    "status": "rejected",
    "reason": "promise2 failure"
  },
  {
    "status": "rejected",
    "reason": "promise3 failure"
  }
] 
*/
Enter fullscreen mode Exit fullscreen mode

Promise.allSettled

Here, even though all the promises are rejected, still .then handler will be executed and we get results of each promise.

Conclusion

In this article, you learned various methods of Promise API.

Check out the next part in this series here where you will learn how to create a Hacker News Clone using Promises, Async/await and Promise methods.

Don't forget to subscribe to get my weekly newsletter with amazing tips, tricks and articles directly in your inbox here.

Discussion

pic
Editor guide