namaste-javascript-notes
Episode 24 : Promise APIs (all, allSettled, race, any) + Interview Questions 🔥
###
4 Promise APIs which are majorly used:
- Promise.all()
- Promise.allSettled()
- Promise.race()
- Promise.any()
💡 One simply doesn’t use async/await without knowing promises!
Promise.all()
A promise is a placeholder for a value that’s going to be available sometime later. The promise helps handle asynchronous operations. JavaScript provides a helper function Promise.all(promisesArrayOrIterable) to handle multiple promises at once, in parallel, and get the results in a single aggregate array.
Q: In what situation one could use above api?
A: Suppose, you have to make parallel API call and get the result, how one can do? This is where Promise.all can be utilized. It is used to handle multiple promises together.
Promise.all([p1, p2, p3]) -> Lets assume we are making 3 API call to fetch data. Also assume p1 takes 3 seconds, p2 takes 1 second, p3 takes 2 seconds.
In first scenario let’s assume all 3 promises are successful. So Promise.all will take 3secs and will give promise value of result like [val1, val2, val3]. It will wait for all of them to finish then it will collect the results and give array as output.
What if any of the promise gets rejected, for eg: Promise.all([p1, p2, p3]). But this time, p2 get rejected after 1 sec. Thus Promise.all will throw same error as p2 immediately as soon as error happened. It will not wait for other promise to either become success or failure. Moreover, p1 and p2 wont get cancelled as they are already triggered so it may result in success or failure depending upon their fate but Promise.all wont care. So its a situation of or/null.
💡 To conclude, the Promise.all() waits for all the input promises to resolve and returns a new promise that resolves to an array containing the results of the input promises. If one of the input promises is rejected, the Promise.all() method immediately returns a promise that is rejected with an error of the first rejected promise.
Promise.allSettled()
Promise.allSettled() method that accepts a list of Promises and returns a new promise that resolves after all the input promises have settled, either resolved or rejected.
Promise.allSettled([p1, p2, p3]) -> Lets assume we are making 3 API call to fetch data. Also assume p1 takes 3 seconds, p2 takes 1 second, p3 takes 2 seconds.
In first scenario let’s assume all 3 promises are successful. So Promise.allSettled will take 3secs and will give promise value of result like [val1, val2, val3]. It will wait for all of them to finish then it will collect the results and give array as output.
What if any of the promise gets rejected, for eg: Promise.all([p1, p2, p3]). But this time, p2 get rejected after 1 sec. Thus Promise.allSettled will still wait for all promises to get settled. So After 3 secs, it will be [val1, err, val3]
💡 Promise.all() -> Fail Fast
💡 Promise.allSettled() -> Will wait and provide accumulative result
Promise.race()
The Promise.race() static method accepts a list of promises as an iterable object and returns a new promise that fulfills or rejects as soon as there is one promise that fulfills or rejects, with the value or reason from that promise. The name of Promise.race() implies that all the promises race against each other with a single winner, either resolved or rejected.
Promise.race([p1, p2, p3]) -> Lets assume we are making 3 API call to fetch data. Also assume p1 takes 3 seconds, p2 takes 1 second, p3 takes 2 seconds. So as soon as first promise will resolve or reject, it will give the output.
So in Happy scenario, Promise.race will give (val2) as output after 1sec as p2 got resolved at the earliest. Whereas if it would have been failed Promise.race would have still given output after 1 sec but this time with error.
Promise.any()
The Promise.any() method accepts a list of Promise objects as an iterable object. If one of the promises in the iterable object is fulfilled, the Promise.any() returns a single promise that resolves to a value which is the result of the fulfilled promise.
Promise.any([p1, p2, p3]) -> Lets assume we are making 3 API call to fetch data. Also assume p1 takes 3 seconds, p2 takes 1 second, p3 takes 2 seconds. So as soon as first promise will be successful, it will give the output.
If in above situation what if p2 got rejected, nothing will happen as Promise.any seek for success, so the moment first success will happen that will become the result.
❓ But what if all promises got failed, so the returned result will be aggregated error i.e. [err1, err2, err3].
Code Examples:
Promise.all()
// 📌 First Scenario
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P1 Success');
}, 3000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P2 Success');
}, 1000);
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P3 Success');
}, 2000);
});
Promise.all([p1, p2, p3]).then((results) => {
console.log(results); // ['P1 Success', 'P2 Success', 'P3 Success'] -> took 3 secs
});
// 📌 Second Scenario
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P1 Success');
}, 3000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('P2 Fail');
}, 1000);
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P3 Success');
}, 2000);
});
Promise.all([p1, p2, p3])
.then(results => console.log(results))
.catch(err => console.error(err)); // throws error after 1 sec i.e. 'P2 Fails'
Promise.allSettled()
💡This is safest among all Promises API.
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P1 Success');
}, 3000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P2 Success');
}, 1000);
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('P3 Fail');
}, 2000);
});
Promise.allSettled([p1, p2, p3])
.then((results) => console.log(results))
.catch(err => console.error(err));
// Over here, it will wait for all promises to be either settled or rejected and then return,
/*
[
{status: 'fulfilled', value: 'P1 Success'},
{status: 'fulfilled', value: 'P2 Success'},
{status: 'rejected', reason: 'P3 Fail'}
]
*/
Promise.race()
// 📌 First Scenario
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P1 Success');
}, 3000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P2 Success');
}, 1000);
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('P3 Fail');
}, 2000);
});
Promise.race([p1, p2, p3])
.then((results) => console.log(results))
.catch(err => console.error(err));
// It will return as soon as first promise is resolved or rejected.
// In above example O/P: "P2 Success"
// 📌 Second Scenario
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P1 Success');
}, 3000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P2 Success');
}, 5000);
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('P3 Fail');
}, 2000);
});
Promise.race([p1, p2, p3])
.then((results) => console.log(results))
.catch(err => console.error(err));
//After 2 secs O/P: "P3 Fail"
Notes:
- Once promise is settled, it means -> got the result. Moreover, settled is broadly divided into two categories:
- resolve, success, fulfilled
- reject, failure, rejected
Promise.any()
// 📌 First Scenario
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P1 Success');
}, 3000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P2 Success');
}, 5000);
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('P3 Fail');
}, 2000);
});
Promise.any([p1, p2, p3])
.then((results) => console.log(results))
.catch(err => console.error(err));
// It will wait for first settled **success**
// In above, p3 will settled first, but since it is rejected, so it will wait further so at 3rd second it will print "P1 Success"
// 📌 Second Scenario
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('P1 Fail');
}, 3000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('P2 Success');
}, 5000);
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('P3 Fail');
}, 2000);
});
Promise.any([p1, p2, p3])
.then((results) => console.log(results))
.catch(err => console.error(err));
// After 5 secs: 'P2 Success'
// 📌 Third Scenario
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('P1 Fail');
}, 3000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('P2 Fail');
}, 5000);
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('P3 Fail');
}, 2000);
});
Promise.any([p1, p2, p3])
.then((results) => console.log(results))
.catch(err => {
console.error(err);
console.error(err.errors); // ['P1 Fail', 'P2 Fail', 'P3 Fail']
});
// Since all are rejected, so it will give "aggregate error" as output
// AggregateError: All promises were rejected
// To get AggregateError array you need to write "err.errors"
Summary
There are 6 static methods of Promise class:
Promise.all(promises) – waits for all promises to resolve and returns an array of their results. If any of the given promises rejects, it becomes the error of Promise.all, and all other results are ignored.
Promise.allSettled(promises) (recently added method) – waits for all promises to settle and returns their results as an array of objects with: status: “fulfilled” or “rejected” value (if fulfilled) or reason (if rejected).
Promise.race(promises) – waits for the first promise to settle, and its result/error becomes the outcome.
Promise.any(promises) (recently added method) – waits for the first promise to fulfill, and its result becomes the outcome. If all of the given promises are rejected, AggregateError becomes the error of Promise.any.
Promise.resolve(value) – makes a resolved promise with the given value.
Promise.reject(error) – makes a rejected promise with the given error. Of all these, Promise.all is probably the most common in practice.
Watch Live On Youtube below:
