TypeScript async/await Asynchrone Programmierung

async/await ist syntaktischer Zucker für asynchrone Programmierung, der in ES2017 eingeführt wurde und asynchronen Code wie synchronen Code aussehen lässt.

SVG-Diagramm: async/await-Ausführungsablauf Background Title async/await execution flow Left: Promise Promise approach fetchData() .then(result => { console.log(result); }) Arrow Right: async/await async/await approach async function main() { const result = await fetchData(); console.log(result); } Bottom: execution flow await execution order Timeline Main thread await Pause Promise Background execution Resume Resume Complete Complete Right-side explanation Advantage comparison ✓ Cleaner code ✓ Synchronous style ✓ Better error stack ✓ Easy to debug ✓ try/catch handling Arrow definition

Das obige Diagramm zeigt die Vorteile von async/await gegenüber traditionellen Promises: saubereren Code und einen klareren Ausführungsablauf.

Promise-Grundlagen

Ein Promise stellt das schließliche Ergebnis einer asynchronen Operation dar.

Beispiel

// Ein Promise erstellen
var promise = new Promise(function(resolve, reject) {
    var success = true;
    if (success) {
        resolve("Operation erfolgreich");
    } else {
        reject("Operation fehlgeschlagen");
    }
});

promise.then(function(result) {
    console.log("Erfolg: " + result);
})["catch"](function(error) {
    console.log("Fehler: " + error);
});

Run result:

Success: Operation successful

async-Funktionen

Verwenden Sie das Schlüsselwort async, um asynchrone Funktionen zu deklarieren.

Beispiel

// async-Funktionen geben automatisch ein Promise zurück
async function greet(): Promise<string> {
    return "Hello, World!";
}

greet().then(function(result) {
    console.log("Ergebnis: " + result);
});

// Asynchrone Funktion gibt ein Promise zurück
async function getData() {
    return { name: "Alice", age: 25 };
}

getData().then(function(data) {
    console.log("Daten: " + JSON.stringify(data));
});

Run result:

结果: Hello, World!
数据: {"name":"Alice","age":25}

await-Schlüsselwort

await wartet, bis ein Promise abgeschlossen ist, und erhält das Ergebnis.

Beispiel

// Simuliere eine asynchrone Operation
function delay(ms: number): Promise<string> {
    return new Promise(function(resolve) {
        setTimeout(function() {
            resolve("Fertig!");
        }, ms);
    });
}

async function main() {
    console.log("Start...");
    var result = await delay(100);
    console.log("Ergebnis: " + result);
    console.log("End");
}

main();

Run result:

Start...
Result: Complete!
End

Fehlerbehandlung

Verwende try/catch, um asynchrone Fehler zu behandeln.

Beispiel

function mayFail(shouldFail: boolean): Promise<string> {
    return new Promise(function(resolve, reject) {
        if (shouldFail) {
            reject(new Error("Operation failed"));
        } else {
            resolve("Operation erfolgreich");
        }
    });
}

async function handleError() {
    try {
        var result = await mayFail(true);
        console.log("Ergebnis: " + result);
    } catch (error) {
        console.log("Caught error: " + error.message);
    }
}

handleError();

Run result:

Error caught: Operation failed

Parallele Ausführung

Verwende Promise.all, um mehrere asynchrone Operationen parallel auszuführen.

Beispiel

function fetchUser(id: number): Promise<{ id: number; name: string }> {
    return Promise.resolve({ id: id, name: "Benutzer" + id });
}

async function main() {
    // Sequenziell ausführen
    console.time("Seriell");
    var user1 = await fetchUser(1);
    var user2 = await fetchUser(2);
    console.log("Seriell abgeschlossen: " + user1.name + ", " + user2.name);
    console.timeEnd("Seriell");

    // Parallel ausführen
    console.time("Parallel");
    var results = await Promise.all([fetchUser(1), fetchUser(2)]);
    console.log("Parallel abgeschlossen: " + results[0].name + ", " + results[1].name);
    console.timeEnd("Parallel");
}

main();

Run result:

串行完成: User1, User2
并行完成: User1, User2

Vorteile von async/await gegenüber Promise

  • Sauberer und besser lesbarer Code
  • Synchroner Code-Stil
  • Besserer Fehler-Stack
  • Einfach zu debuggen

Zusammenfassung

  • async：Async-Funktionen deklarieren
  • await：Warten auf ein Promise
  • Fehlerbehandlung:try/catch
  • Parallel:Promise.all
Weitere Erweiterungen