Erklären Sie Promise.any() und async-await in JavaScript?-js-Tutorial-php.cn

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

PHPz

Freigeben： 2023-09-13 22:17:02

nach vorne

1067 Leute haben es durchsucht

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

In diesem Tutorial lernen wir jede()-Methode von Promise kennen. In JavaScript können wir Promise verwenden, um asynchrone Anfragen zu verarbeiten. Das Schreiben von asynchronem Code in unserer Anwendung zum Abrufen der Daten beschleunigt die Arbeit, da nicht darauf gewartet werden muss, dass die Daten anderen Code ausführen.

Promise.any()-Methode

Wie der Name der Methode any() vermuten lässt, führt sie jedes erfüllte Versprechen aus. Daher wird das Versprechen, das zuerst aufgelöst wird, von der Promise.any()-Methode ausgeführt, während andere Versprechen möglicherweise ausgeführt werden oder nicht. Darüber hinaus werden abgelehnte Versprechen nicht von der Methode Promise.any() ausgeführt.

Syntax

Benutzer können die Promise.any()-Methode gemäß der folgenden Syntax verwenden.

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

Nach dem Login kopieren

In der obigen Syntax können wir das von jedem Promise zurückgegebene Ergebnis im „then“-Block verarbeiten.

Parameter

Array_of_promise – Es enthält mehrere Versprechen, diejenigen, die schnell aufgelöst werden können, werden von der Methode any() ausgeführt.

Promise.any() mit asynchronem 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. „wait“ wird innerhalb einer asynchronen Funktion verwendet, um die Ausführung anzuhalten, bis ein bestimmtes Versprechen erfüllt ist.

Grammatik

Das Folgende ist die Syntax für die Verwendung der Promise.any()-Methode und des async-await in JavaScript:

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

Nach dem Login kopieren

Hier sind Versprechen1, Versprechen2 usw. die Versprechen, auf die Sie warten möchten. Die Promise.any-Methode gibt ein Promise zurück, das mithilfe des Werts des ersten aufzulösenden Eingabe-Promises aufgelöst wird, oder, wenn alle Eingabe-Promises abgelehnt werden, ein Array aller Eingabe-Promises, die abgelehnt wurden.

Beispiel 1

Im folgenden Beispiel erstellen wir verschiedene Promises mit dem Promise()-Konstruktor. Wir lehnen Promise_2 ab und lösen die anderen Promises auf. Zwei Millisekunden später lösen wir Promise_3 auf. Daher wird Promise_1 zuerst erfolgreich ausgeführt.

In der Ausgabe können wir beobachten, dass die Methode any() das Ergebnis von Promise_1 ausgibt, da es früh aufgelöst wird.

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

Nach dem Login kopieren

Beispiel 2

Im folgenden Beispiel haben wir die asynchrone Funktion getData() erstellt. Hier verwenden wir die Methode fetch(), um mehrere Promise-Arrays und Promises zu erstellen.

Wir erhalten Daten von der Live-API. Das Requests-Array enthält drei Promises, aber in der Ausgabe können wir beobachten, dass das Ergebnis kein iterierbares Objekt ist und nur die Antworten früher aufgelöster Promises enthält.

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

Nach dem Login kopieren

In diesem Beispiel verwendet die getData-Funktion Promise.any(), um ein Promise zu erstellen, das durch das erste von drei zu implementierenden Fetch-Promises implementiert wird. Die Funktion verwendet dann das Schlüsselwort „await“, um auf die Erfüllung des Versprechens zu warten und den Antworttext zu protokollieren. Wenn ein Promise abgelehnt wird, wird der Catch-Block ausgeführt und ein Fehler wird in der Konsole protokolliert.

Die Verwendung von Promise.any() mit async und wait kann eine nützliche Möglichkeit sein, mehrere Versprechen auf prägnante und lesbare Weise zu verarbeiten. Es ermöglicht Ihnen, eine Reihe von Versprechen anzugeben und das erste erfüllte Versprechen zu verarbeiten, während Sie die anderen ignorieren.

In diesem Tutorial haben wir gelernt, wie man die Methode „any() Promise“ verwendet. Das Ziel der Verwendung der Methode „any()“ besteht darin, die einzige Methode im aufgelösten Versprechen auszuführen.

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