Wie verwende ich „await' außerhalb einer asynchronen Funktion in JavaScript?-js-Tutorial-php.cn

Wie verwende ich „await' außerhalb einer asynchronen Funktion in JavaScript?

WBOY

Freigeben： 2023-08-26 16:53:02

nach vorne

1095 Leute haben es durchsucht

Wie verwende ich „await außerhalb einer asynchronen Funktion in JavaScript?

In JavaScript wird das Schlüsselwort async-await verwendet, um eine Funktion asynchron zu machen. Wenn wir eine Funktion asynchron machen, funktioniert sie wie Multithreads und führt den Code parallel aus, was uns hilft, die Anwendungsleistung zu verbessern.

Hier lernen wir, das Schlüsselwort „await“ außerhalb asynchroner Funktionen zu verwenden.

Funktion sofort aufrufen

Wir werden den Ausdruck in dieser Methode verwenden, um die Funktion sofort aufzurufen. Wir können das Schlüsselwort „await“ mit „promise“ oder einer anderen Funktion innerhalb der Funktion verwenden.

Grammatik

Benutzer können Funktionsausdrücke verwenden, um Funktionen gemäß der folgenden Syntax sofort aufzurufen.

(async () => {
   let result = await fetchData();
})();

Nach dem Login kopieren

In der obigen Syntax erstellen wir keine Funktion, aber innerhalb der geschweiften Klammern haben wir die Pfeilfunktionssyntax mit den Schlüsselwörtern „async“ und „await“ geschrieben.

Beispiel 1

Im folgenden Beispiel rufen wir die Funktion direkt nach der Definition auf. Innerhalb des Ausdrucks definieren wir die Pfeilfunktion. Im Codeblock der Pfeilfunktion haben wir das Schlüsselwort „await“ und „axios“ verwendet, um Daten von der API abzurufen.

Wir haben CDN im Abschnitt hinzugefügt, um Axios zu verwenden. In der Ausgabe kann der Benutzer die Daten beobachten, die wir von der API erhalten haben.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
   <h2>Using the <i>await</i> with immediately invoking function expression.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');

      (async () => {
         let result = await axios.get("https://dummyjson.com/products/1");

         output.innerHTML += "The results from the API is <br/>";
         for (let key in result.data) {
            output.innerHTML += key + " : " + result.data[key] + "<br/>";
         }
      })();
   </script>
</body>
</html>

Nach dem Login kopieren

Versprechen verwenden

Wir können Promise anstelle einer asynchronen Funktion verwenden, um zu warten, bis wir eine Antwort vom Server erhalten, oder die Ausführung des Codes anzuhalten.

Grammatik

Benutzer können Promise in JavaScript gemäß der folgenden Syntax verwenden.

promise.then((response) => {
   // use response
})
.catch((err) => {
   // handle the errors
})

Nach dem Login kopieren

In der obigen Syntax haben wir die Blöcke then() und Catch() zusammen mit Promise verwendet, um Antworten und Fehler zu verarbeiten.

Beispiel 2

Im folgenden Beispiel machen wir dasselbe wie Beispiel 1. In Beispiel 1 verwenden wir die async-await-Syntax und axios, um die Daten abzurufen. Hier verwenden wir das Versprechen von axios, um die Daten abzurufen. Die axios.get()-Methode gibt ein Promise zurück, das wir mithilfe der Blöcke then() und Catch() auflösen.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
   <h2>Using the <i>promises</i> instead of async-await.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      (() => {
         axios.get("https://dummyjson.com/products/1").then((result) => {

            output.innerHTML += "The results from the API is <br/>";
            for (let key in result.data) {
                  output.innerHTML += key + " : " + result.data[key] + "<br/>";
            }
         })
         .catch((err) => {
            output.innerHTML += "The error is " + err;
         })
      })();
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 3

In diesem Beispiel erstellen wir ein Promise mithilfe des Promise()-Konstruktors mit dem Schlüsselwort new. Wir lehnen dieses Engagement ab.

Danach verwenden wir die Blöcke then() und Catch() sowie die Promise-Variable SamplePromise, um die Antwort oder den Fehler vom Promise zu erhalten. Der Benutzer kann beobachten, dass die Steuerung in der Ausgabe an den Block „catch()“ geht, da wir den Fehler zurückweisen.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
   <h2>Using the <i>promises</i> instead of async-await.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let SamplePromise = new Promise((resolve, reject) => {
         reject("Promise is rejected without any error");
      })
      SamplePromise.then((response)=>{
         output.innerHTML += "Response from the promise is " + response;
      })
      .catch((err)=>{
         output.innerHTML += "The error message is - " + err;
      })
   </script>
</body>
</html>

Nach dem Login kopieren

In diesem Tutorial lernen Benutzer, das Schlüsselwort „await“ außerhalb asynchroner Funktionen zu verwenden. Darüber hinaus haben wir eine Alternative zur Verwendung von Promise erläutert, bei der das Schlüsselwort async-await verwendet wird.

Das obige ist der detaillierte Inhalt vonWie verwende ich „await' außerhalb einer asynchronen Funktion in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!