Weekly Webtips
Published in

Weekly Webtips

Promise Race and Promise Timeout in JavaScript

Promise race in Javascript
Photo by Pietro Mattia on Unsplash

Promise Race

There are n number of things you can achieve if you know how to use Promises in JavaScript. There are certain ways you can make a function promise by adding and using certain keywords which include async-await generally or any method which returns an instance of Promise class

You might be very familiar with Promise.all and Promise.allSettled but you probably do not use Promise.race much so today I will be focus on one good use case where you can use Promise.race.

What is Promise race?

Promise race is a special type of method that takes an array of methods as an input and returns a promise that resolved an output of one method that returns at first only.

Unlike Promise.all it does not return an array of output but returns a single value which returns whatever works first

For example:

example of Promise.all with log function
Promise.all example

If I ran this program the result would be:

[ 'one', 'two', 'three' ]

And if I switch from Promise.all to Promise.race then the output would be:

'three'

This is because three has the least time to run. If you compare them with other promises. In the general brief, Promise.race would take the output of first promise that is resolved based on it’s time of execusion

Promise timeout

there are no build-in method for a timeout so we would create a workaround for it using Promise.race

How to timeout a method after some time?

Let’s take a good example for Promise.race . To construct this, let’s say we want to create a method that should be self timeout out after some duration. To tackle this use case we can make use of Promise.race . Let’s see how

Promise.race example with timeout and reject timeout method
Example of Promise.race with reject timeout

Let’s look at this method,

here we have a regular method named promiseThatWillTakeMoreTime and it has an execution time of 1000ms and against it, one more method that will take a timeout value and return the rejected value of Request timed out after the time has reached named rejectSleep

That will work flowless! For timeout more than 1000, the result will be

output - this is a heavy function which return promise

and for less than 1000 timeout the result would be an error as

Error: Request timed out

Great! but can we create a good-looking approach for this? Yes, we can

Create a prototype method for the promise

we will keep the rejectSleep the method as it is but will add a new prototype in Promise to make use of it across all the scope something like

Prototype method named Promise.timeout
Prototype method named Promise.timeout

Great job! now we have a new promise method that will return the same output as above and can make any function with a custom timeout

You can also create a method that will return the Promise.race instance but I would prefer it be on prototype level

Conclusion

There are many ways you can create your method and prototype that will serve you the same output. You can choose whatever is best fit for you

I hope this article will help you to tackle some more good use-case revolving around this and get that done. Thanks for reading.

Build component-driven. It’s better, faster, and more scalable.

Forget about monolithic apps, start building component-driven software. Build better software from independent components and compose them into infinite features and apps.

OSS Tools like Bit offer a great developer experience for building component-driven. Start small and scale with many apps, design systems or even Micro Frontends. Give it a try →

An independent product component: watch the auto-generated dependency graph

Learn more

--

--

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