Explain Promise.race() with async-await in JavaScript

In this article, we will try to understand how we may implement Promise.race() method with async-await in JavaScript with the help of certain coding examples as well as theoretical explanations. Let us first quickly understand how we may implement Promise.race() method. This method is one of the most commonly used promise methods that state whichever promise will reach its end, first will be executed first and the rest will remain not executed. This may also be realized in real terms as whoever will reach first in the race will win the race, here also the concept remains the same.

Syntax: The following syntax will help us to understand how we may implement Promise.race() method:

Promise.race([first_promise , second_promise, ...]).then(
    // do something......
)

Let us see the following example for a better understanding of the above-illustrated Promise.race() method’s syntax:

Example 1: In this example, we will be creating three promises one after another with a timer function (setTimeout() method) inside each one of them. Each timer function would have different timings which will be mentioned at the end of their illustration. Then we will use Promise.race() method which will take all three promises as input in the form of an array and executes them as per its own role.

Javascript

let first_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("GeeksforGeeks...!!");
    }, 1000);
});

let second_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("JavaScript......!!");
    }, 2000);
});

let third_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("TypeScript...!!");
    }, 3000);
});

let promise_array = [first_promise, second_promise, third_promise];
Promise.race(promise_array).then((result) => console.log(result));

Output:

GeeksforGeeks...!!

Now that we have understood how we may execute Promise.race() method, let us see the following example which will help us to understand how we may implement Promise.race() method with async-await keywords.

Example 2: Like in the previous example, here we will be creating three promises, each having different timer functions with different timeouts. Then we will create a function (or a method) having prefix as async and inside it, we will store the result using another keyword called await then we will display the result with the help of then() method.

Javascript

let first_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("GeeksforGeeks...!!");
    }, 1000);
});

let second_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("JavaScript......!!");
    }, 2000);
});

let third_promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("TypeScript...!!");
    }, 3000);
});


async function displayResult() {
    let promise_array = [first_promise, second_promise, third_promise];
    let result = await promise_array;
    Promise.race(promise_array).then((result) => console.log(result));
}

displayResult();

Output:

GeeksforGeeks...!!