Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Expert
  • Last Updated : 24 Apr, 2022

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 execution point, first will be executed first and the rest will remain left as it is. This may also be realized in real terms as whenever will reach first 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...!!


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!