Maison > Article > interface Web > Comment exécuter un tableau donné de promesses en continu en JavaScript ?

Comment exécuter un tableau donné de promesses en continu en JavaScript ?

PHPzavant: 2023-09-24 13:25:02721parcourir

如何在 JavaScript 中连续运行给定的 Promise 数组？

En JavaScript, il existe une méthode appelée "Promise.all" qui permet d'exécuter une série de Promises en parallèle. Cependant, il peut y avoir des moments où vous souhaitez continuer à remplir vos engagements. Ceci est utile si vous souhaitez vous assurer que chaque promesse est exécutée dans l'ordre, ou si vous devez utiliser le résultat d'une promesse lors de l'exécution de la promesse suivante.

Il existe différentes manières d'exécuter une série de promesses consécutives en JavaScript. Dans cet article, nous en présenterons quelques-uns.

Promise.prototype.then()

Une façon d'exécuter un tableau de Promise en série est de les enchaîner à l'aide de la méthode then(). Cette méthode accepte en entrée une fonction qui sera exécutée une fois la promesse terminée.

Exemple

<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result1"></div>
   <div id="result2"></div>
   <div id="result3"></div>
   <script>
      Promise.resolve(1) .then(result => {
         document.getElementById("result1").innerHTML = result
         return Promise.resolve(2);
      }) .then(result => {
          document.getElementById("result2").innerHTML = result
         return Promise.resolve(3);
      }) .then(result => {
          document.getElementById("result3").innerHTML = result
      });  
   </script>
</body>
</html>

Comme vous pouvez le voir, nous enchaînons trois promesses ensemble en utilisant la méthode then(). La première promesse se résout à la valeur 1 et affiche cette valeur. La deuxième promesse se résout à la valeur 2, qui est également affichée. Enfin, la troisième promesse se résout à la valeur 3 et affiche cette valeur.

Étant donné que la méthode « puis » renvoie une promesse, nous pouvons enchaîner les promesses de cette façon pour créer une série.

en attente de

Une autre façon d'exécuter un tableau de promesses en série consiste à utiliser une boucle "en attente de". Cette boucle vous permet d'utiliser le mot-clé wait dans la boucle for. Le mot-clé wait suspend l'exécution du code jusqu'à ce que la promesse soit remplie.

Exemple

Voici un exemple -

<html>
<head>
   <title>Example- for-await-of</title>
</head>
<body>
   <script>
      async function runPromisesInSeries() {
         for await (const promise of [
            Promise.resolve(1),
            Promise.resolve(2),
            Promise.resolve(3),
         ]) {
               const result = await promise;
               document.write(result);
               document.write("<br>")
            }
         }
      runPromisesInSeries();
   </script>
</body>
</html>

Dans cet exemple, nous avons une fonction asynchrone contenant une boucle "d'attente". Cette boucle parcourt une série de promesses. Pour chaque promesse du tableau, nous attendons qu’elle se réalise. Une fois la promesse remplie, la valeur est affichée.

Utilisation des bibliothèques

Si vous avez besoin de plus de fonctionnalités que celles fournies par l'API native de Promise, vous pouvez utiliser des bibliothèques telles que Bluebird ou Q : ces bibliothèques fournissent des méthodes supplémentaires pour travailler avec Promise.

Par exemple, Bluebird fournit une méthode "map" qui vous permet de mapper un tableau de valeurs à un tableau de promesses, puis d'attendre que toutes les valeurs soient remplies -

const Promise = require(&#39;bluebird&#39;);

Promise.map([1, 2, 3], x => {
   return Promise.resolve(x * 2);
}).then(results => {
   console.log(results); // [2, 4, 6]
});

Conclusion

Dans cet article, nous avons appris la contiguïté en JavaScript Plusieurs façons différentes d'exécuter une série de promesses. Nous avons vu comment enchaîner les promesses en utilisant la méthode "then", comment utiliser les boucles "for-wait-of" et comment utiliser des bibliothèques comme Bluebird ou Q.

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 for 循环 promise 异步 prototype

Déclaration：

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

Article précédent：Différence entre location.host et location.hostname en JavaScriptArticle suivant：Différence entre location.host et location.hostname en JavaScript

Articles Liés

Voir plus