Working with Promise.race() in JavaScript

Promises, by themselves are one of the very important features of Modern JavaScript. To make them much more powerful, ECMAScript added several methods on the Promise object for various types of requirements. One of such method is race.

We can pass several promises as an iterable(usually an array) to the race method as input and it will return a promise (resolved or rejected) based on the first resolved/rejected promise from the passed promises.

The promise returned from the race method will get resolved or rejected based on the promise that first gets fulfilled or rejected from the passed array.

example:

let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('After 100ms')
    }, 100);
})

let promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('After 50ms')
    }, 50);
})

let racedPromise = Promise.race([promise1, promise2]);

racedPromise.then((data) => {
    console.log(data) // we get After 50ms
})

In the above code, we passed two promises to the race method. Since the second promise gets resolved first (after 50ms), its result will be returned from the return promise.

The returned promise from race gets rejected if the first responded promise gets rejected.

let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('After 100ms')
    }, 100);
})

let promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('Rejected After 50ms')
    }, 50);
})

let racedPromise = Promise.race([promise1, promise2]);

racedPromise.then((data) => {
    console.log(data)
}).catch((error) => {
    console.log(error) // we get Rejected After 50ms
})

We can also pass a non-promise static value as an iterable item to the race method. Then the returned promise gets resolved immediately as soon as it comes across the static non-promise value.

example:

let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('After 100ms')
    }, 0);
})

let racedPromise = Promise.race([promise1, "How to JS"]);

racedPromise.then((data) => {
    console.log(data) // we get How to JS
}).catch((error) => {
    console.log(error)
})

In the previous example, we passed a Promise which gets resolved through a setTimeOut. Instead of that, if we pass a immediately resolved promise, then it will be considered as resolved first

example:

Promise.race([Promise.resolve('Promise'), 'A String: How to JS']).then((data) => {
    console.log(data); // we get Promise
}).catch((error) => {
    console.log(error);
})

The promise returned from the race method will be forever pending, if the passed iterable to this method is empty.

let racedPromise = Promise.race([]);

console.log(racedPromise); // we get Promise { <pending> }

setTimeout(() => {
    console.log(racedPromise); // we get Promise { <pending> }
}, 5000);