Home > Article > Web Front-end > Promise.race() and async-await explained in JavaScript?

Promise.race() and async-await explained in JavaScript?

WBOYforward: 2023-09-08 22:49:071436browse

在 JavaScript 中解释 Promise.race() 和 async-await ？

We will learn about Promise.race() method in this tutorial. As the name of the race() method implies, the promise passed as an argument to the race() method performs a race.

Therefore, no matter which Promise is resolved first, it will only be executed by the race() method, and other Promises will never be executed.

Promise.race()

The

Promise.race method in JavaScript allows you to wait for the first of a set of Promises to be fulfilled or rejected, and handle the result or error that occurs. Once one of the input promises is fulfilled or rejected, it returns a fulfilled or rejected promise, and the value or reason for that promise.

Users can use the promise.race() method according to the following syntax to execute the first settled promise.

Promise.race(iterable).then((response) => {
   // handle response
});

In the above syntax, the Promise.race() method takes iterable as the first parameter, and we can handle the response of the successfully executed promise within the "then" block.

Hereiterable Takes an iterable object, such as a set of promises to execute any promise within it, resolved first.

grammar

Here's the syntax for how to use the Promise.race method with async-await in JavaScript:

async function example() {
   try {
      const result = await Promise.race([promise1, promise2, ...]);
   } catch (error) {
      // handle error
   }
}

Here, promise1, promise2, etc. are the promises you want to wait for. The Promise.race method returns a resolved or rejected Promise containing the value or reason of the first input Promise to be resolved or rejected.

The asynchronous function example uses a try/catch statement to handle error conditions, where if any input promise is rejected, the catch block is executed.

Example 1

In this example, we create multiple Promises and set timers within the Promise to resolve or reject them. We have passed an array of Promise as argument to race() method.

The output shows that the race() method executes a Promise that is rejected because it has no timer. Therefore, the race() method executes the first Promise, which is fulfilled early even if it is rejected or resolved.

<html>
<body>
   <h2>Using the Promise.race() </i> Method </h2>
   <div id="output"></div>
   <script>
      let promise_1 = new Promise((res, rej) => {
         setTimeout(() => {
            res("Resolved promise with time of 0 milliseconds");
         }, 1000);
      });
      let promise_2 = new Promise((res, rej) =>
      rej("This promise is rejected!")
      );
      let promise_3 = new Promise((res, rej) => {
         setTimeout(() => {
            res("Resolved promise with time of 2000 milliseconds");
         }, 2000);
      });
      Promise.race([promise_1, promise_2, promise_3]).then(
         (response) => {
            document.getElementById("output").innerHTML +=
            "Promise resolved successfully.";
         },
         (error) => {
            document.getElementById("output").innerHTML += "Promise rejected";
         }
      );
   </script>
</body>
</html>

Example 2

In this example, we take a different API and make a promise using the fetch method. We have a series of Promises called requests.

We use the race() method to resolve all requests, no matter which Promise will resolve first, we print the URL in the "then" block.

<html>
<body>
   <h2>Using Promise.race() Method with async-await</h2>
   <div id = "output"> </div>
   <button onclick = "executeRace()"> Fetch data from early promise </button>
   <script>
      async function executeRace() {
         // array of different promises
         const requests = [
            fetch("https://api.publicapis.org/entries"),
            fetch("https://catfact.ninja/fact"),
            fetch("https://api.coindesk.com/v1/bpi/currentprice.json"),
         ];
         // resolving the promises using the race() method
         const res = await Promise.race(requests);
         document.getElementById("output").innerHTML +=
         "The first promise resolve is " + res.url;
      }
   </script>
</body>
</html>

The race() method can be used when the user needs to use the response of the first resolved Promise, even if it is rejected or resolved. If the user needs to use the result of the first successfully resolved Promise, they should use the Promise.any() method.

The above is the detailed content of Promise.race() and async-await explained in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript try catch 对象 promise 异步

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：List the important core components of React NativeNext article：List the important core components of React Native

See more

Promise.race() and async-await explained in JavaScript?

Promise.race()

grammar

Example 1

Example 2

Related articles