Async/await in TypeScript

Dieser Artikel erklärt async/await in TypeScript.

YouTube Video

Async/await in TypeScript

In TypeScript ist async ein Schlüsselwort, um asynchrone Operationen prägnant zu beschreiben, und verhält sich ähnlich wie die async/await-Syntax in JavaScript. Async-Funktionen wurden entwickelt, um den Umgang mit Funktionen, die Promises zurückgeben, intuitiver zu gestalten.

Grundlagen von async-Funktionen

Funktionen, die mit dem Schlüsselwort async deklariert werden, geben immer ein Promise zurück. Hier ist ein grundlegendes Beispiel:.

1async function fetchData(): Promise<string> {
2    return "Data received";
3}
4
5fetchData().then((data) => console.log(data)); // "Data received"

In diesem Beispiel wird der zurückgegebene Wert automatisch mit Promise.resolve aufgelöst, da die async-Funktion immer ein Promise zurückgibt. Mit anderen Worten, "Data received" wird zu einem Promise<string> und als asynchrone Operation behandelt.

Das Schlüsselwort await

Das Schlüsselwort await kann nur innerhalb einer async-Funktion verwendet werden. Dies ermöglicht es, die Ausführung der Funktion zu pausieren und auf das Ergebnis eines Promise zu warten, bevor die Funktion fortgesetzt wird.

Im folgenden Beispiel wird die asynchrone Verarbeitung mit fetch unter Verwendung von async/await geschrieben.

 1async function getUserData() {
 2    try {
 3        const response = await fetch("https://codesparklab.com/json/example.json");
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("Error fetching user data:", error);
 8    }
 9}
10
11getUserData();

In diesem Beispiel wird await verwendet, um auf den Abschluss des von der fetch-Funktion zurückgegebenen Promise zu warten, und das Ergebnis wird der Variablen response zugewiesen. Außerdem wird auch das Ergebnis von response.json() mit await abgewartet.

Fehlerbehandlung mit async/await

Fehler, die während der asynchronen Verarbeitung auftreten, können mit der Standard-try...catch-Syntax abgefangen werden. Wenn ein Fehler im await-Teil auftritt, wird dieser Fehler im catch-Block behandelt.

 1async function fetchDataWithErrorHandling() {
 2    try {
 3        const response = await fetch('https://invalid.codesparklab.com/');
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Fetch error:", error);
11    }
12}
13
14fetchDataWithErrorHandling();

Im obigen Beispiel wird das Ergebnis der fetch-Funktion mit await abgewartet, und falls ein Fehler auftritt, wird er mit try...catch behandelt.

Vorteile von async/await

1. Intuitive asynchrone Verarbeitung: Durch die Verwendung von async/await wird der Codefluss intuitiver als bei der Verwendung von Promise-Ketten (then oder catch), sodass der Code wie synchroner Code geschrieben werden kann.

2. Einfache Fehlerbehandlung: Die Verwendung von try...catch vereinfacht die Fehlerbehandlung bei asynchronen Operationen. Man kann lesbareren Code schreiben als durch die Verwendung von Promise-Ketten.

Rückgabewerte von async-Funktionen

Eine async-Funktion gibt immer ein Promise zurück. Daher ist auch ohne explizites Zurückgeben eines Promise die asynchrone Verarbeitung durch die Verwendung des async-Schlüsselworts möglich.

1async function example() {
2    return 42;
3}
4
5example().then((result) => console.log(result)); // 42

Im obigen Code wird der synchrone Wert 42 zurückgegeben, aber da er sich in einer async-Funktion befindet, wird er automatisch in Promise.resolve(42) umgewandelt.

Sequentielle Ausführung von asynchronen Funktionen

Beim Ausführen mehrerer asynchroner Funktionen nacheinander können Sie await verwenden, um deren Reihenfolge zu steuern.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function processData() {
19    const data1 = await fetchData1();
20    console.log(data1);
21
22    const data2 = await fetchData2();
23    console.log(data2);
24}
25
26processData();

In diesem Beispiel wird fetchData2 ausgeführt, nachdem auf die Fertigstellung von fetchData1 gewartet wurde. Dies ist lesbarer im Vergleich zur Verwendung einer Promise-Kette.

Parallele Ausführung

Wenn Sie asynchrone Operationen parallel ausführen möchten, können Sie Promise.all verwenden, um mehrere Promises gleichzeitig zu handhaben.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function fetchMultipleData() {
19    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
20    console.log(data1);
21    console.log(data2);
22}
23
24fetchMultipleData();

In diesem Fall werden fetchData1 und fetchData2 gleichzeitig ausgeführt, und der Prozess geht weiter, nachdem beide aufgelöst wurden. Dies ermöglicht eine effiziente Handhabung mehrerer asynchroner Operationen.

Zusammenfassung

• Eine async-Funktion gibt ein Promise zurück, und durch die Verwendung des await-Schlüsselworts können Sie auf das Ergebnis einer asynchronen Operation warten.
• Durch die Verwendung von try...catch wird die Fehlerbehandlung in asynchronen Operationen vereinfacht.
• Durch die Verwendung von Promise.all ist es möglich, mehrere asynchrone Operationen parallel auszuführen.

async/await wird häufig in TypeScript und JavaScript verwendet, da es eine einfachere Beschreibung von asynchronen Operationen ermöglicht.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video