Maison > Article > interface Web > Expliquez Promise.allSettled() et async-await en JavaScript ?

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

WBOYavant: 2023-08-30 23:53:021201parcourir

解释 JavaScript 中的 Promise.allSettled() 和 async-await 吗？

Promise.allSettled() est une méthode qui prend un itérable de Promises comme paramètre et renvoie une promesse qui est remplie lorsque toutes les promesses de l'itérable ont été résolues, ce qui signifie qu'elles ont été implémentées ou rejetées.

Lorsque la promesse renvoyée est remplie, elle est résolue via un tableau d'objets contenant des informations sur la promesse remplie ou rejetée. Chaque objet possède un attribut de statut (Terminé ou Rejeté) et un attribut de valeur ou de raison.

Par exemple, si vous disposez d'un ensemble de promesses qui représentent les requêtes réseau et que vous souhaitez connaître l'état de chaque requête (si elle a réussi ou non), vous pouvez utiliser Promise.allSettled() pour attendre que toutes les requêtes se terminent avant traiter le résultat.

Promesse.allSettled

L'utilisation de Promise.allSettled() est utile lorsque vous souhaitez gérer les résultats de plusieurs promesses, qu'elles aient été remplies ou rejetées. C'est différent de Promise.all() qui ne sera résolu que lorsque toutes les promesses seront satisfaites et rejettera si une promesse est rejetée.

Grammaire

La syntaxe d'utilisation de Promise.allSettled() est la suivante -

Promise.allSettled(iterable);

Iterable est l'entrée fournie à promise.allSettled(). L'objet itérable est un tableau contenant des promesses.

Asynchrone en attente

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.

Grammaire

async function example() {
   // asynchronous code goes here
}

await est utilisé dans une fonction asynchrone pour suspendre l'exécution jusqu'à ce qu'une promesse spécifiée soit remplie.

async function example() {
   const result = await somePromise;
   // the rest of the function will execute only after somePromise is fulfilled
}

Promise.allSetlled et async-await

La syntaxe

async/await est un moyen de donner au code asynchrone l'apparence et le comportement d'un code synchrone, ce qui le rend plus facile à lire et à écrire. Il vous permet d'écrire du code asynchrone qui ressemble à du code synchrone sans avoir besoin de rappels ou de méthodes then().

Vous pouvez utiliser la syntaxe async/await pour attendre la résolution de la méthode Promise.allSettled() avant d'accéder au résultat.

Ceci est un exemple d'utilisation de Promise.allSettled() avec async/await -

async function example() {
   const promises = [promise1, promise2, promise3];
   const results = await Promise.allSettled(promises);
   for (const result of results) {
      if (result.status === 'fulfilled') {
         console.log(result.value);
      } else {
         console.error(result.reason);
      }
   }
}

Voici deux cas d'utilisation possibles pour Promise.allSettled() dans le monde réel :

Gestion des requêtes réseau
Gestion des saisies utilisateur dans les formulaires

Exemple 1

Si vous disposez d'un ensemble de requêtes réseau (telles que des requêtes HTTP) et que vous souhaitez gérer les résultats de toutes les requêtes, qu'elles aient abouti ou non, vous pouvez utiliser Promise.allSettled() pour attendre que toutes les requêtes soient terminées avant de les traiter. les résultats.

<html>
<body>
   <h2> Using the <i> Promise.allSettled() </i> method to handle multiple reuests. </h2>
   <button onclick = "getData()"> Fetch Data </button>
   <div id = "output"> </div>
   <script>
      async function getData() {
         const requests = [
            fetch('https://jsonplaceholder.typicode.com/todos/1'),
            fetch('https://jsonplaceholder.typicode.com/todos/2'),
            fetch('https://jsonplaceholder.typicode.com/todos/3')
         ];
         const results = await Promise.allSettled(requests);
         let output = '';
         let count = 0;
         for (const result of results) {
            if (result.status === 'fulfilled') {
               const data = await result.value.json();
               output += `<p>Promise ${count+1 } fulfilled</p>`;
            } else {
               output += `<p>Promise ${count+1} rejected </p>`;
            }
            count++
         }
         document.getElementById('output').innerHTML = output;
      }
   </script>
</body>
</html>

Supposons que vous ayez un formulaire avec des champs de saisie et que vous souhaitiez valider tous les champs avant de soumettre le formulaire. Dans ce cas, vous pouvez utiliser Promise.allSettled() pour attendre que toutes les promesses de validation soient terminées avant de décider de soumettre ou non le formulaire.

Voici les étapes à suivre :

Étape 1 - Dans un document HTML, rédigez un formulaire avec des champs de saisie. Prenez son identifiant en entrée.
Étape 2 - Définissez la fonction validateForm() qui sera appelée lors de la soumission du formulaire.
Étape 3 - Dans la fonction validateForm(), récupérez la valeur du champ de saisie à l'aide de la méthode document.getElementById() >.
Étape 4- Créez un tableau de promesses de validation à l'aide de la fonction validateInput() et transmettez les valeurs du champ de saisie en tant que paramètres.
Étape 5 - Utilisez Promise.allSettled() pour attendre que toutes les promesses de validation soient terminées.
Étape 6 - Parcourez les résultats de Promise.allSettled() et vérifiez la propriété status de chaque objet de résultat. Si une promesse est rejetée, définissez l'indicateur hasErrors sur true et enregistrez un message d'erreur.
Étape 7 - Si l'indicateur hasErrors est faux, le formulaire est considéré comme valide et peut être soumis. Si l'indicateur hasErrors est vrai, le formulaire contient des erreurs et ne doit pas être soumis.
Étape 8 - Ajoutez l'attribut onsubmit à l'élément de formulaire dans le formulaire HTML et configurez-le pour appeler la fonction validateForm(). Si la fonction validateForm() renvoie false, utilisez une instruction return false pour empêcher la soumission du formulaire.

Exemple 2

<html>
   <h2> Using Promise.allSettled with async-await </h2>
   <form onsubmit = "validateForm(); return false;">
   <label for = "input">Input:</label> <input type = "text" id = "input" required>
   <br><br><input type = "submit" value = "Submit"></form>
   <p id = "output"></p>
   <script >
      function validateInput(input) {
         return new Promise((resolve, reject) => {
            if (input.length > 0) {
               resolve();
            } else {
               reject(new Error('Input is required'));
            }
         });
      }
      async function validateForm() {
         const input = document.getElementById('input').value;
         const validationPromises = [
            validateInput(input),
         ];
         const results = await Promise.allSettled(validationPromises);
         let hasErrors = false;
         for (const result of results) {
            if (result.status === 'rejected') {
               hasErrors = true;
               console.error(result.reason);
            }
         }
         if (!hasErrors) {
            // form is valid, submit it
            document.getElementById("output").innerHTML="Form Submitted Successfully";
         } else {
            // form has errors, do not submit it
            document.getElementById("output").innerHTML = 'Form has errors';
         }
      }
   </script>
</html>

Promise.allSettled() peut être utilisé dans diverses situations, telles que la gestion des requêtes réseau et la validation des entrées utilisateur, et peut être utilisé conjointement avec la syntaxe async/await ou la méthode then() pour gérer la valeur complétée d'une promesse. .

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 html 对象 promise 异步 http

Déclaration：

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

Article précédent：Méthode JavaScript at() ES2022Article suivant：Méthode JavaScript at() ES2022

Articles Liés

Voir plus