How does Promise.any() method differs from Promise.race() method in JavaScript ?
Last Updated :
04 May, 2022
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.
Javascript
<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.
Javascript
<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.
Javascript
<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.....
Similar Reads
How does Promise.all() method differs from Promise.allSettled() method in JavaScript ?
In this article, we will first understand in brief the Promise.all() as well as Promise.allSettled() methods and then we will try to visualize how they differ from each other through some theoretical as well as some coding examples. Both Promise.all() and Promise.allSettled() methods are the methods
4 min read
How to use every() or some() methods in JavaScript ?
In JavaScript, the every() and some() methods are array methods used to check the elements of an array based on a given condition. every(): Checks if all elements in an array satisfy a condition.some(): Checks if at least one element in an array satisfies a condition.Table of Content every() Methods
2 min read
Implement polyfill for Promise.all() method in JavaScript
The task is to write a polyfill for Promise.all methods in javascript. What is a Polyfill? A polyfill is a piece of computer code written to implement a feature in a browser that does not yet support it. It could be because the older version of the browser you are using, or the new version of the br
4 min read
How to call promise inside another promise in JavaScript ?
In JavaScript, to call promise inside another promise we first declare a promise using its basic syntax and further execute this promise then create another which is to be called inside the previous promise for its execution. Promise is basically a JavaScript object which is responsible for handling
3 min read
How to wait for multiple Promises in JavaScript ?
Waiting for multiple promises in JavaScript involves using Promise.all() or Promise.allSettled() methods. These methods accept an array of promises as input. Promise.all() waits for all promises to either resolve or reject, providing a single promise that resolves with an array of results or rejects
3 min read
How to access the Value of a Promise in JavaScript
In this article, we will see how to access the value of Promise in JavaScript. The Promise is a feature of ES6 introduced in 2015. The concept of Promises is generally used when we want to work asynchronously. The value of a Promise can be accessed in JavaScript using the following methods. Table of
2 min read
Promise reject does not propagate the error correctly in JavaScript
In this article, we will try to understand why Promise's reject() method doesn't propagate the error correctly, and later we will see the solution for the same along with certain theoretical explanations and coding examples. Let us first have a look into the following section quickly which enlighten
4 min read
How to set Maximum Execution Time for a Promise Await in JavaScript ?
In JavaScript, asynchronous operations are more common, often implemented using promises and async/await syntax. However, there are certain scenarios where we want to set the execution times for these asynchronous operations to prevent them from running indefinitely. In this article, we'll explore v
3 min read
JavaScript Promise race() Method
The Promise.race() method returns a promise that fulfills or rejects as soon as one of the promises in an iterable fulfills or rejects, with the value or reason from that promise. We may think of this particular method as in the form of a real-life example where several people are running in a race
2 min read
What is the difference between every() and some() methods in JavaScript ?
In this article, we will see the difference between every() and some() methods in JavaScript. Array.every() methodThe Array.every() method in JavaScript is used to check whether all the elements of the array satisfy the given condition or not. The output will be false if even one value does not sati
3 min read