Maison >interface Web >js tutoriel >Expliquez Promise.any() et async-await en JavaScript ?

Expliquez Promise.any() et async-await en JavaScript ?

PHPzavant: 2023-09-13 22:17:021055parcourir

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

Nous découvrirons la méthode any() de Promise dans ce tutoriel. En JavaScript, nous pouvons utiliser Promise pour gérer les requêtes asynchrones. L'écriture de code asynchrone dans notre application pour obtenir les données accélère les choses car il n'est pas nécessaire d'attendre que les données exécutent un autre code.

Méthode Promise.any()

Comme le nom de la méthode any() l'indique, elle exécutera toute promesse tenue. Par conséquent, la promesse résolue en premier sera exécutée par la méthode Promise.any(), tandis que les autres promesses peuvent ou non être exécutées. De plus, toute promesse rejetée ne sera pas exécutée par la méthode Promise.any().

Syntaxe

Les utilisateurs peuvent utiliser la méthode promise.any() selon la syntaxe suivante.

Promise.any(Array_of_promise).then(
   // handle result
)

Dans la syntaxe ci-dessus, nous pouvons gérer le résultat renvoyé par n'importe quelle promesse dans le bloc "then".

Paramètres

Array_of_promise – Il contient plusieurs promesses, celles qui peuvent être résolues rapidement seront exécutées par la méthode any().

Promise.any() avec attente asynchrone

Les mots-clés async et wait en JavaScript sont utilisés pour gérer le code asynchrone. async est utilisé avant la définition d'une fonction pour indiquer que la fonction est asynchrone et renverra une promesse. wait est utilisé dans une fonction asynchrone pour suspendre l'exécution jusqu'à ce qu'une promesse spécifiée soit remplie.

Grammaire

Voici la syntaxe d'utilisation de la méthode Promise.any() et de l'attente asynchrone en JavaScript :

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

Ici, promesse1, promesse2, etc. sont les promesses que vous souhaitez attendre. La méthode Promise.any renvoie une promesse qui est résolue en utilisant la valeur de la première promesse d'entrée à résoudre ou, si toutes les promesses d'entrée sont rejetées, un tableau de toutes les promesses d'entrée qui ont été rejetées.

Exemple 1

Dans l'exemple ci-dessous, nous créons différentes promesses à l'aide du constructeur Promise(). Nous rejetons promise_2 et résolvons les autres promesses, et nous résolvons promise_3 deux millisecondes plus tard. Par conséquent, promise_1 s’exécutera avec succès en premier.

Dans le résultat, nous pouvons observer que la méthode any() imprime le résultat de promise_1 car il sera résolu plus tôt.

<html>
<body>
   <h2> Using the Promise.any() Method </h2>
   <div id="output"> </div>
   <script>
      let promise_1 = new Promise((res, rej) => {
         res("Resolved promise with time of 0 milliseconds");
      });
      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);
      });
      // resolving the promises
      Promise.any([promise_1, promise_2, promise_3]).then((response) => {
         document.getElementById("output").innerHTML += response;
      });
   </script>
</body>
</html>

Exemple 2

Dans l'exemple ci-dessous, nous avons créé la fonction asynchrone getData(). Ici, nous utilisons la méthode fetch() pour créer plusieurs tableaux Promise et Promises.

Nous obtenons des données de l'API en direct. Le tableau des requêtes contient trois promesses, mais dans le résultat, nous pouvons observer que le résultat n'est pas un objet itérable et contient uniquement les réponses des promesses résolues précédemment.

<html>
<body>
   <h2>Using Promise.any() with async-await </h2>
   <button onclick="getData()"> Fetch any one promise Data </button>
   <div id="output"> </div>
   <script>
      async function getData() {
         try {
            // multiple promises
            const requests = [
               fetch("https://jsonplaceholder.typicode.com/todos/1"),
               fetch("https://jsonplaceholder.typicode.com/todos/2"),
               fetch("https://jsonplaceholder.typicode.com/todos/3"),
            ];
            const result = await Promise.any(requests);
            document.getElementById("output").innerHTML =
            "The status of result is " + result.status;
         } 
         catch (error) {
            document.getElementById("output").innerHTML = error;
         }
      }
   </script>
</body>
</html>

Dans cet exemple, la fonction getData utilise Promise.any() pour créer une promesse qui est implémentée par la première des trois promesses de récupération à implémenter. La fonction utilise ensuite le mot-clé wait pour attendre que la promesse soit remplie et enregistrer le texte de la réponse. Si une promesse est rejetée, le bloc catch sera exécuté et une erreur sera enregistrée sur la console.

Utiliser Promise.any() avec async et wait peut être un moyen utile de gérer plusieurs promesses de manière concise et lisible. Il vous permet de spécifier un ensemble de promesses et de gérer la première promesse remplie tout en ignorant les autres.

Nous avons appris à utiliser la méthode any() Promise dans ce tutoriel. Le but de l’utilisation de la méthode any() est d’exécuter la seule méthode de la promesse résolue.

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!

JavaScript 构造函数 catch 对象 promise 异步

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment redresser une image avec animation à l'aide de FabricJS ?Article suivant：Comment redresser une image avec animation à l'aide de FabricJS ?

Articles Liés

Voir plus