promise.any” and “promise.race” in ES2021

New Promise Features in ES2021 “promise.race” and “promise.any”

Mayank Gupta
Feb 13 · 3 min read
Image for post
Image for post
Working with Promise Any and Race (promise.any and promise.race)

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:

https://gist.github.com/Mayankgupta688/2223d8b21191db1e21428115d61366ee

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.

https://gist.github.com/Mayankgupta688/797cb54fda86145714d485a54dd773fd

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.

https://gist.github.com/Mayankgupta688/a24ab73ed4702c145f02611b439fe66b

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.

https://gist.github.com/Mayankgupta688/35aca3941f20a326e13832032ecba4d2

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”.

https://gist.github.com/Mayankgupta688/f5284b5fa57c8045833b2e37ec4139d5

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.

https://gist.github.com/Mayankgupta688/1c3b4d7f24635455cbc01f3f1bf936be

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.

https://gist.github.com/Mayankgupta688/7a35e62f904ce1fed4c68be735100033

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.

TechnoFunnel

TechnoFunnel focus on learning and understanding the programming concepts

Sign up for TechnoFunnel

By TechnoFunnel

Getting stared with Latest Technologies. Connect with us for more detailed articles and in-depth explanation of many frontend and backend Technologies and concepts Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Mayank Gupta

Written by

9 Years of Experience with Front-end Technologies and MEAN Stack. Working on all Major UI Frameworks like React, Angular and Vue https://medium.com/technofunnel

TechnoFunnel

We are focussed towards learning different technologies like React, Angular, Machine Learning, Python, Golang and AWS. Follow us for detailed conceptual understanding of these technologies and Interview Preparations.

Mayank Gupta

Written by

9 Years of Experience with Front-end Technologies and MEAN Stack. Working on all Major UI Frameworks like React, Angular and Vue https://medium.com/technofunnel

TechnoFunnel

We are focussed towards learning different technologies like React, Angular, Machine Learning, Python, Golang and AWS. Follow us for detailed conceptual understanding of these technologies and Interview Preparations.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store