Wie erstelle ich eine asynchrone Funktion in TypeScript?

Asynchrone Programmierung ermöglicht es uns, mehrere Aufgaben parallel auszuführen. Mit den Schlüsselwörtern async/await können wir Funktionen asynchron machen.

Bevor wir beginnen, wollen wir zunächst die Anforderungen der asynchronen Programmierung und Funktionen verstehen. Wenn wir Daten von der API erhalten, dauert die Antwort einige Zeit. Jetzt müssen wir die von der API erhaltenen Ergebnisse in unserer Anwendung verwenden.

Single-Threaded-Programmiersprachen wie TypeScript und JavaScript stoppen niemals die Codeausführung. Anstatt also auf eine Antwort von der API zu warten, beginnt sie mit der Ausführung einiger Operationen für den Nullwert.

Wenn wir eine Funktion asynchron machen, unterbricht sie die Ausführung eines bestimmten Codeblocks, bis wir eine Antwort von der API erhalten. Daher können wir die Daten manipulieren, anstatt Nullwerte zu manipulieren.

Grammatik

Benutzer können Funktionen in TypeScript asynchron machen, indem sie der folgenden Syntax folgen.

async function func1() {
   await resolvePromise();
   // this code will not be executed until the promise is resolved
}

func1();
// this code will execute even if the promise is not resolved.

In der obigen Syntax haben wir vor der Funktion das Schlüsselwort async verwendet, um sie asynchron zu machen. Darüber hinaus verwenden wir das Schlüsselwort „await“, um die Ausführung der Funktion anzuhalten, bis wir die Antwort des Versprechens erhalten.

Das Schlüsselwort „await“ unterbricht also lediglich die Ausführung der asynchronen Funktion und anderer Code kann weiterhin ausgeführt werden. Sobald die Zusage aufgelöst ist, beginnt die Ausführung erneut.

Lassen Sie uns nun das Konzept der asynchronen Funktionen anhand verschiedener Beispiele verstehen.

Beispiel

In diesem Beispiel haben wir eine asynchrone Testfunktion mit dem Schlüsselwort async erstellt. In der Funktion test() verwenden wir das Schlüsselwort „await“, um die Funktion für einen bestimmten Zeitraum anzuhalten.

In der Ausgabe kann der Benutzer beobachten, dass „Nach Funktionsausführung“ gedruckt wird, bevor der Wert der Datenvariablen in der Funktion gedruckt wird. Daraus können wir also verstehen, dass, wenn das Schlüsselwort „await“ die Ausführung einer Funktion anhält, diese mit der Ausführung von anderem Code beginnt und dadurch die Leistung der Anwendung verbessert.

async function test(): Promise {
   let data: string = await "default string";
   console.log("The value of data is " + data);
}

console.log("Before function execution");
test();
console.log("After function execution");

Beim Kompilieren wird der folgende JavaScript-Code generiert:

"use strict";
async function test() {
   let data = await "default string";
   console.log("The value of data is " + data);
}
console.log("Before function execution");
test();
console.log("After function execution");

Ausgabe

Der obige Code erzeugt die folgende Ausgabe -

Before function execution
After function execution
The value of data is default string

Beispiel 2

In diesem Beispiel enthält die Funktion samplePromise() Versprechen. Wir verwenden den Promise-Konstruktor, um Promises zu erstellen und aufzulösen. Darüber hinaus haben wir das Versprechen der Funktion „samplePromise()“ zurückgegeben.

async function samplePromise() {
   const new_promise = new Promise(function (resolve, reject) {
      resolve("Successfully resolved");
   });
   return new_promise;
}

async function executeAsync() {
   try {
      let response = await samplePromise();
      console.log(response);
   } catch (err) {
      console.log("Error is " + err);
   }
}
console.log("Before calling a function");
executeAsync();
console.log("After calling a function");

async function samplePromise() {
   const new_promise = new Promise(function (resolve, reject) {
      resolve("Successfully resolved");
   });
   return new_promise;
}

async function executeAsync() {
   try {
      let response = await samplePromise();
      console.log(response);
   } catch (err) {
      console.log("Error is " + err);
   }
}
console.log("Before calling a function");
executeAsync();
console.log("After calling a function");

Before calling a function
After calling a function
Successfully resolved

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine asynchrone Funktion in TypeScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!