“promise.any” and “promise.race” in ES2021
New Promise Features in ES2021 “promise.race” and “promise.any”
TechnoFunnel Presents another article on new Promise features in ES2021. We are going to demonstrate the usage and benefits of using these new functions in your application. Let’s create some promises and Introduce “promise.any” and “promise.race” keywords to the same.
Creating Promises in JavaScript:
In the above code, we have created simple promise using “new Promise” keyword, which takes “resolve” and “reject” as a parameter. Once the Promise is Resolved, we can further attach a call back function to the promise.
In the above code the callback function is triggered once the promise is resolved in 3 Seconds. The data attached to the resolve keyword is available to the callback function for further processing…
Rejecting the Promises
Similar to “resolving” the promise, we can also reject the promise and attach a callback function to the same. The second function passed to “then” keyword is invoked when there is a rejection scenario.
Working with Multiple Promises
Lets add multiple promises to the code and try to resolve these promises at different time intervals. We are adding 4 promises that are resolved after interval of 3500, 800, 300 and 1000 respectively.
Given above are multiple Promises that are added to the code. Now lets look at the use case scenario for “Promise.any” and “Promise.race”.
Working with “promise.any”
In this section, we will look at the use case scenario for using “promise.any”.
In the above code we have created 4 different promises that are resolved after different intervals. Using “promise.any”, if any of the promise is resolved, the callback function is invoked. The callback function waits for the first promise to get resolved and invokes the callback function with the data received from the first resolved promise from the list.
From the list of promises above, “thirdPromise” is the promise that will be resolved first. Once the “thirdPromise” will be resolved in 300ms, the callback function associated with “promise.any” will be invoked and the callback function will contain data which is resolved by promise three.
In short, “promise.any” looks for the promise that resolves first from the list of promises mentioned in the Array.
Promise.any for Reject Scenario
Let look at the scenario of rejection that would happen in 300ms which is fastest resolve or rejection out of the list of promises mentioned.
In the above code we can see that there is a Promise which Is Rejected after 300ms. In the above case, “promise.any” function callback will be invoked for “secondPromise” which is resolved after 800ms and not for the rejected Promise from the list.
Working with “promise.race”
Similar to the “promise.any” in which the callback function is invoked on the successful resolution or rejection of any one the promise from the list. “promise.race” looks for the first promise that either resolves or rejects from the list of promises.
In the above code we can see that one of the promise is getting rejected before any of the promise get resolved or rejected. The callback function is invoked once the rejection is received. “promise.race” callback will be invoked as soon as “thirdPromise” is rejected after 300ms.
Conclusion
The basic difference between “any” and “race” is that race executed callback function for both resolved and rejected promises whereas the “any” function executes on the first successful resolution of promise from the list.
