Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

October 26, 2020 05:12 am GMT

Important Methods provided by Promise API

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

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

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

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

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

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

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

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.

In the next and last part of this multi-part series, we will build an amazing application that will use these promise methods. So stay tuned for that.

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

Original Link: https://dev.to/myogeshchavan97/important-methods-provided-by-promise-api-8li

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To