Promise.race() et async-await expliqués en JavaScript ?-js tutoriel-php.cn

Promise.race() et async-await expliqués en JavaScript ?

WBOY

Libérer： 2023-09-08 22:49:07

avant

1502 Les gens l'ont consulté

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

Nous découvrirons la méthode Promise.race() dans ce tutoriel. Comme le nom de la méthode race() l'indique, la promesse passée en argument à la méthode race() effectue une course.

Ainsi, quelle que soit la promesse résolue en premier, elle ne sera exécutée que par la méthode race(), les autres promesses ne seront jamais exécutées.

Promesse.race()

La méthode

Promise.race en JavaScript vous permet d'attendre que la première d'un ensemble de promesses soit remplie ou rejetée, et de gérer le résultat ou l'erreur si cela se produit. Une fois que l'une des promesses d'entrée est remplie ou rejetée, elle renvoie une promesse remplie ou rejetée, ainsi que la valeur ou la raison de cette promesse.

Les utilisateurs peuvent utiliser la méthode promise.race() selon la syntaxe suivante pour exécuter la première promesse réglée.

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

Copier après la connexion

Dans la syntaxe ci-dessus, la méthode Promise.race() prend un itérable comme premier paramètre et nous pouvons gérer la réponse de la promesse exécutée avec succès à l'intérieur du bloc "then".

Ici, iterable prend un objet itérable, tel qu'un ensemble de promesses pour exécuter toute promesse qu'il contient, résolue en premier.

Grammaire

Voici la syntaxe permettant d'utiliser la méthode Promise.race avec async-await en JavaScript :

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

Copier après la connexion

Ici, promesse1, promesse2, etc. sont les promesses que vous souhaitez attendre. La méthode Promise.race renvoie une promesse résolue ou rejetée contenant la valeur ou la raison de la première promesse d'entrée à résoudre ou à rejeter.

L'exemple de fonction asynchrone utilise une instruction try/catch pour gérer les conditions d'erreur, où si une promesse d'entrée est rejetée, le bloc catch est exécuté.

Exemple 1

Dans cet exemple, nous créons plusieurs promesses et définissons des minuteries dans la promesse pour les résoudre ou les rejeter. Nous avons passé un tableau de Promise comme argument à la méthode race().

Le résultat montre que la méthode race() exécute une promesse rejetée car elle n'a pas de minuterie. Par conséquent, la méthode race() exécute la première promesse, qui est remplie plus tôt même si elle est rejetée ou résolue.

<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>

Copier après la connexion

Exemple 2

Dans cet exemple, nous prenons une API différente et faisons une promesse en utilisant la méthode fetch. Nous avons une série de promesses appelées demandes.

Nous utilisons la méthode race() pour résoudre toutes les requêtes, quelle que soit la promesse qui sera résolue en premier, nous imprimons l'URL dans le bloc "puis".

<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>

Copier après la connexion

La méthode race() peut être utilisée lorsque l'utilisateur doit utiliser la réponse de la première promesse résolue, même si elle est rejetée ou résolue. Si l'utilisateur doit utiliser le résultat de la première promesse résolue avec succès, il doit utiliser la méthode Promise.any().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!