Heim > Artikel > Web-Frontend > Erklären Sie Promise.allSettled() und async-await in JavaScript?

Erklären Sie Promise.allSettled() und async-await in JavaScript?

WBOYnach vorne: 2023-08-30 23:53:021227Durchsuche

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

Promise.allSettled() ist eine Methode, die eine Iterable von Promises als Parameter verwendet und ein Promise zurückgibt, das erfüllt ist, wenn alle Promises in der Iterable aufgelöst wurden, d. h. sie wurden implementiert oder abgelehnt.

Wenn das zurückgegebene Versprechen erfüllt ist, wird es durch eine Reihe von Objekten aufgelöst, die Informationen über das erfüllte oder abgelehnte Versprechen enthalten. Jedes Objekt verfügt über ein Statusattribut (Abgeschlossen oder Abgelehnt) und ein Wert- oder Grundattribut.

Wenn Sie beispielsweise über eine Reihe von Versprechen verfügen, die Netzwerkanfragen darstellen, und Sie den Status jeder Anfrage wissen möchten (ob sie erfolgreich war oder nicht), können Sie Promise.allSettled() verwenden, um vorher auf den Abschluss aller Anfragen zu warten Verarbeitung des Ergebnisses.

Promise.allSettled

Die Verwendung von Promise.allSettled() ist nützlich, wenn Sie die Ergebnisse mehrerer Versprechen verarbeiten möchten, unabhängig davon, ob diese erfüllt oder abgelehnt wurden. Es unterscheidet sich von Promise.all(), das nur aufgelöst wird, wenn alle Versprechen erfüllt sind, und ablehnt, wenn ein Versprechen abgelehnt wird.

Grammatik

Die Syntax für die Verwendung von Promise.allSettled() lautet wie folgt -

Promise.allSettled(iterable);

Iterable ist die Eingabe, die für Promise.allSettled() bereitgestellt wird. Das iterierbare Objekt ist ein Array, das Versprechen enthält.

Asynchron warten

Die Schlüsselwörter „async“ und „await“ in JavaScript werden zur Verarbeitung von asynchronem Code verwendet. async wird vor einer Funktionsdefinition verwendet, um anzuzeigen, dass die Funktion asynchron ist und ein Promise zurückgibt.

Grammatik

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

await wird innerhalb einer asynchronen Funktion verwendet, um die Ausführung anzuhalten, bis ein bestimmtes Versprechen erfüllt ist.

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

Promise.allSetlled und async-await

async/await-Syntax ist eine Möglichkeit, asynchronen Code eher wie synchronen Code aussehen und verhalten zu lassen, wodurch er einfacher zu lesen und zu schreiben ist. Sie können damit asynchronen Code schreiben, der wie synchroner Code aussieht und sich anfühlt, ohne dass Rückrufe oder then()-Methoden erforderlich sind.

Sie können die async/await-Syntax verwenden, um auf die Auflösung der Promise.allSettled()-Methode zu warten, bevor Sie auf das Ergebnis zugreifen.

Dies ist ein Beispiel für die Verwendung von Promise.allSettled() mit 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);
      }
   }
}

Hier sind zwei mögliche Anwendungsfälle für Promise.allSettled() in der realen Welt:

Bearbeitung von Netzwerkanfragen
Umgang mit Benutzereingaben in Formularen

Beispiel 1

Wenn Sie über eine Reihe von Netzwerkanforderungen verfügen (z. B. HTTP-Anforderungen) und die Ergebnisse aller Anforderungen verarbeiten möchten, unabhängig davon, ob diese erfolgreich waren, können Sie Promise.allSettled() verwenden, um vor der Verarbeitung auf den Abschluss aller Anforderungen zu warten die Ergebnisse.

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

Angenommen, Sie haben ein Formular mit Eingabefeldern und möchten alle Felder validieren, bevor Sie das Formular absenden. In diesem Fall können Sie Promise.allSettled() verwenden, um zu warten, bis alle Validierungsversprechen abgeschlossen sind, bevor Sie entscheiden, ob das Formular gesendet werden soll.

Hier sind die Schritte, die Sie befolgen müssen:

Schritt 1 - Schreiben Sie in ein HTML-Dokument ein Formular mit Eingabefeldern. Nehmen Sie die ID als Eingabe.
Schritt 2 – Definieren Sie die Funktion validateForm(), die aufgerufen wird, wenn das Formular gesendet wird.
Schritt 3 – Rufen Sie innerhalb der Funktion validateForm() den Wert des Eingabefelds mit der Methode document.getElementById() > ab.
Schritt 4 – Erstellen Sie mit der Funktion validateInput() ein Array von Validierungsversprechen und übergeben Sie die Eingabefeldwerte als Parameter.
Schritt 5 – Verwenden Sie Promise.allSettled(), um zu warten, bis alle Validierungsversprechen abgeschlossen sind.
Schritt 6 – Durchlaufen Sie die Ergebnisse von Promise.allSettled() und überprüfen Sie die Statuseigenschaft jedes Ergebnisobjekts. Wenn ein Versprechen abgelehnt wird, setzen Sie das Flag „hasErrors“ auf „true“ und protokollieren Sie eine Fehlermeldung.
Schritt 7 – Wenn das hasErrors-Flag falsch ist, gilt das Formular als gültig und kann gesendet werden. Wenn das Flag hasErrors wahr ist, weist das Formular Fehler auf und sollte nicht gesendet werden.
Schritt 8 – Fügen Sie das onsubmit-Attribut zum Formularelement im HTML-Formular hinzu und legen Sie es so fest, dass die Funktion validateForm() aufgerufen wird. Wenn die Funktion validateForm() „false“ zurückgibt, verwenden Sie eine „Return False“-Anweisung, um zu verhindern, dass das Formular gesendet wird.

Beispiel 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() kann in einer Vielzahl von Situationen verwendet werden, z. B. zur Bearbeitung von Netzwerkanfragen und zur Validierung von Benutzereingaben, und kann in Verbindung mit der async/await-Syntax oder der then()-Methode verwendet werden, um den abgeschlossenen Wert eines Promise zu verarbeiten .

Das obige ist der detaillierte Inhalt vonErklären Sie Promise.allSettled() und async-await in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html 对象 promise 异步 http

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：ES2022 JavaScript at()-MethodeNächster Artikel：ES2022 JavaScript at()-Methode

In Verbindung stehende Artikel

Mehr sehen