In this article, we will first try to understand how we may declare or use Promise.any() and Promise.race() methods followed by some facts which will eventually help us to understand how they differ from each other (through theoretical as well as coding examples).
Let us first quickly understand in brief about both the methods followed by their syntaxes of declaration.
Promise.any() method: This method returns a promise that fulfills or rejects as soon as any of the promises, which we have passed inside the iterable object-like array, gets successfully fulfilled or resolved.
Syntax for Promise.any() method: Following syntax, we may use to declare this method.
Promise.any([promise_1 , promise_2 , ... ]). then(
// do something...
)Promise.race() method: This method returns a promise that fulfills or rejects as soon as any of the promises, which we have passed inside the iterable object-like array, gets successfully fulfilled or resolved at first or earlier, with the value or the reason from that promise.
Syntax for Promise.race() method: Following syntax, we may use to declare this method.
Promise.race([promise_1 , promise_2 , ... ]). then(
// do something...
)Now that we have understood both the methods in brief and that too with their syntaxes of declarations, now let us jump into another section below in which we will see how do they actually differ from each other and this we will understand with the help of some theoretical as well as some coding examples too.
How do they differ from each other?
The following points will help us to understand how do they actually differ from each other:-
1. If any of the passed promise (as an input) is in the rejected state:
- Promise.any() method will accept that rejected promise and will further check for other passed in promises and if found some resolved promise then it will return its data as an output.
- Promise.race() method will accept that rejected promise and will not further check for other passed in promises and eventually returns an error message which is passed inside the rejected promise as the data.
2. If all the passed in promises (as in inputs) are in rejected state:
- Promise.any() method will accept all the rejected state promises and returns a peculiar (different) error which is known as Aggregated Error which implies that all the promises which are passed in are actually in the rejected state.
- Promise.race() method will accept all the rejected state promises and without even further checking other rejected state promises after checking the first rejected state promise, it will return an error that contains the data which is passed inside the reject() method of the first rejected state promise.
Now that we have understood some theoretical explanations related to the fact that how do they actually differ from each other its high time to visualize the above-illustrated facts through some following illustrated examples:-
Example 1: In this example, will pass in several resolved state promises as an input parameter (as elements of an array) inside both the methods and visualize their output.
<script> let first_resolved_promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Resolved after 1 second");
}, 1000);
});
let second_resolved_promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Resolved after 2 seconds");
}, 2000);
});
let third_resolved_promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Resolved after 3 seconds");
}, 3000);
});
try {
let result_1 = Promise.any([
first_resolved_promise,
second_resolved_promise,
third_resolved_promise,
]);
result_1.then((data) => console.log("Any's data: " + data));
let result_2 = Promise.race([
first_resolved_promise,
second_resolved_promise,
third_resolved_promise,
]);
result_2.then((data) => console.log("Race's data: " + data));
} catch (error) {
console.log(error);
}
</script> |
Output: The output for both the methods remains the same since for all the resolved promises both of the methods would act as the same since for each of them whichever promise resolves first will be executed at first and the rest remains unexecuted.
Any's data: Resolved after 1 second Race's data: Resolved after 1 second
Example 2: In this example, we will pass one rejected state promise inside both as an input parameter and visualize their output.
<script> let rejected_promise = new Promise((resolve, reject) => {
reject("Rejected Promise.....");
});
let first_resolved_promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Resolved after 1 second");
}, 1000);
});
let second_resolved_promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Resolved after 2 seconds");
}, 2000);
});
try {
let result_1 = Promise.any([
rejected_promise,
first_resolved_promise,
second_resolved_promise,
]);
result_1.then((data) => console.log("Any's data: " + data));
let result_2 = Promise.race([
rejected_promise,
first_resolved_promise,
second_resolved_promise,
]);
result_2.then((data) => console.log("Race's data: " + data));
} catch (error) {
console.log(error);
}
</script> |
Output: Race’s data will be rejected since it will not be able to accept rejected promise and eventually will also ignore other successfully resolved promise data. On the other hand, Any’s data will be executed successfully.
Uncaught (in promise) Rejected Promise..... Any's data: Resolved after 1 second
Example 3: In this example, we will pass all the rejected state promises inside both of these method and will visualize their respective outputs.
<script> let first_rejected_promise = new Promise((resolve, reject) => {
reject("First Rejected Promise.....");
});
let second_rejected_promise = new Promise((resolve, reject) => {
reject("Second Rejected Promise...");
});
let third_rejected_promise = new Promise((resolve, reject) => {
reject("Third Rejected Promise....");
});
try {
let result_1 = Promise.any([
first_rejected_promise,
second_rejected_promise,
third_rejected_promise,
]);
result_1.then((data) => console.log("Any's data: " + data));
let result_2 = Promise.race([
first_rejected_promise,
second_rejected_promise,
third_rejected_promise,
]);
result_2.then((data) => console.log("Race's data: " + data));
} catch (error) {
console.log(error);
}
</script> |
Output: Both of the promises will return an error message but that error message would be different for both. In output first error message is of Promise.any() method and second error message is of Promise.race() method.
Uncaught (in promise) AggregateError: All promises were rejected Uncaught (in promise) First Rejected Promise.....