TypeScript Promise im Detail

Promise ist die Grundlage der asynchronen Programmierung in JavaScript, und TypeScript bietet vollständige Typunterstützung für Promise.

Durch generische Parameter können Sie die Typen des aufgelösten Werts und des abgelehnten Werts von Promise präzise angeben.

SVG-Diagramm: Promise-Workflow Background Title Promise Workflow Creating a Promise Creating a Promise new Promise((resolve, reject) => {...}) Arrow pending Pending Branch: resolve/reject fulfilled ✓ rejected ✗ Bottom section: Methods then() · catch() · finally() Arrow marker

Warum Promise?

In JavaScript sind viele Operationen asynchron, wie Netzwerkanfragen, Dateilesen, Timer usw.

Promise bietet eine einheitliche Schnittstelle für asynchrone Programmierung, wodurch asynchroner Code einfacher zu schreiben und zu verwalten ist.

Die generische Unterstützung von TypeScript gewährleistet die Typsicherheit von Promise.

Konzeptbeschreibung:Ein Promise ist ein Objekt, das das Endergebnis einer asynchronen Operation darstellt. Es hat drei Zustände: pending (in Bearbeitung), fulfilled (erfolgreich), rejected (fehlgeschlagen).

Ein Promise erstellen

Verwenden Sie den Promise-Konstruktor, um ein Promise zu erstellen, indem Sie eine Executor-Funktion übergeben.

Beispiel

// Erstelle ein Promise, verwende ein Generikum, um den Typ des aufgelösten Werts anzugeben
// Promise<string> bedeutet, dass bei Erfolg ein String zurückgegeben wird
var promise = new Promise<string>(function(resolve, reject) {
    var success = true;
    if (success) {
        // Der Aufruf von resolve bedeutet, dass die Operation erfolgreich war; übergib den Ergebniswert
        resolve("Erfolg!");
    } else {
        // Der Aufruf von reject bedeutet, dass die Operation fehlgeschlagen ist; übergib den Fehler
        reject(new Error("Fehler"));
    }
});

// Verwende then, um den Erfolgsfall zu behandeln
promise.then(function(value) {
    console.log("Fertig: " + value);
})["catch"](function(error) {
    // Verwende catch, um den Fehlerfall zu behandeln
    console.log("Fehler: " + error.message);
});

Ausgabe:

Complete: Success!

Erklärung zu Generics:Promise<T>Das T in Promise<T> ist der Typ des Werts, wenn das Promise erfolgreich aufgelöst wird. Dadurch kann TypeScript den Typ des zurückgegebenen Werts ableiten.

Promise-Verkettung

Die then- und catch-Methoden geben ein neues Promise zurück und ermöglichen dadurch verkettete Aufrufe.

Beispiel

// Verketteter Aufruf: Jedes then gibt einen neuen Wert zurück, der vom nächsten then empfangen wird
var promise = Promise.resolve(1)
    .then(function(n) {
        // Erstes then, n = 1
        return n * 2;  // Gibt 2 zurück
    })
    .then(function(n) {
        // Zweites then, n = 2
        return n + 10;  // Gibt 12 zurück
    })
    .then(function(n) {
        // Drittes then, n = 12
        console.log("Endergebnis: " + n);
        return n;
    });

console.log("Promise-Kette: " + promise);

Ausgabe:

最终结果: 12
Promise 链: [object Promise]

Verkettung:Jeder then-Aufruf gibt ein neues Promise zurück, sodass wir mehrere asynchrone Operationen nacheinander ausführen können.

Promise.all

Promise.all wartet, bis alle Promises abgeschlossen sind, und gibt ein Array zurück, das alle Ergebnisse enthält.

Beispiel

// Drei Promises erstellen
var p1 = Promise.resolve(1);
var p2 = Promise.resolve(2);
var p3 = Promise.resolve(3);

// Promise.all wartet, bis alle Promises abgeschlossen sind
// Gibt ein Array zurück, das die Ergebnisse aller Promises enthält
Promise.all([p1, p2, p3]).then(function(results) {
    console.log("Alle abgeschlossen: " + results);
    // Summe berechnen
    console.log("Summe: " + results.reduce(function(a, b) { return a + b; }, 0));
});

Ausgabe:

全部完成: 1,2,3
总和: 6

Hinweis:Wenn irgendein Promise fehlschlägt, lehnt Promise.all sofort ab und wartet nicht auf den Abschluss anderer Promises.

Promise.race

Promise.race gibt das Ergebnis des Promise zurück, das zuerst abgeschlossen wird (ob erfolgreich oder fehlgeschlagen).

Beispiel

// Drei Promises mit unterschiedlichen Verzögerungen erstellen
var p1 = new Promise(function(resolve) {
    setTimeout(function() { resolve("p1"); }, 100);
});
var p2 = new Promise(function(resolve) {
    setTimeout(function() { resolve("p2"); }, 50);
});
var p3 = new Promise(function(resolve) {
    setTimeout(function() { resolve("p3"); }, 30);
});

// Promise.race gibt das Ergebnis des ersten Promise zurück, das abgeschlossen wird
Promise.race([p1, p2, p3]).then(function(value) {
    console.log("Zuerst abgeschlossen: " + value);
});

Ausgabe:

最先完成: p3

Anwendungsfälle:Promise.race wird häufig verwendet, um Timeout-Funktionalität zu implementieren: ein lang laufendes Promise gegen ein Timeout-Promise antreten zu lassen.

Promise.allSettled

Promise.allSettled wartet, bis alle Promises abgeschlossen sind (ob erfolgreich oder fehlgeschlagen), und gibt den Status und das Ergebnis jedes Promise zurück.

Beispiel

// Erstelle drei Promises, von denen eines fehlschlägt
var p1 = Promise.resolve("Success");
var p2 = Promise.reject(new Error("Failure"));
var p3 = Promise.resolve("Done");

// Promise.allSettled wartet, bis alle Promises abgeschlossen sind
// Gibt den Status und den Wert/Grund jedes Promises zurück
Promise.allSettled([p1, p2, p3]).then(function(results) {
    results.forEach(function(result, index) {
        if (result.status === "fulfilled") {
            console.log("Promise " + index + ": " + result.value);
        } else {
            console.log("Promise " + index + ": " + result.reason.message);
        }
    });
});

Ausgabe:

Promise 0: 成功
Promise 1: 失败
Promise 2: 完成

Unterschiede:Promise.all bricht sofort beim ersten Fehler ab; Promise.allSettled wartet, bis alle Promises abgeschlossen sind.

Promise-Typannotationen

Die generische Unterstützung von TypeScript macht Promise-Typdeklarationen präzise.

Beispiel

// Definiere eine Funktion, die ein Promise zurückgibt
// Promise<{ name: string; age: number }> gibt den Typ des zurückgegebenen Benutzerobjekts an
function getUser(): Promise<{ name: string; age: number }> {
    return Promise.resolve({ name: "Alice", age: 25 });
}

// async-Funktion: gibt implizit ein Promise zurück
async function main() {
    // await leitet den Typ von user automatisch ab
    var user = await getUser();
    console.log("Benutzer: " + JSON.stringify(user));
}

main();

Typinferenz:TypeScript leitet den Rückgabetyp eines Promise automatisch anhand generischer Parameter ab, wodurch wir auch in async/await vollständige Typhinweise erhalten.

Hinweise

  • Generische Parameter:Geben Sie immer generische Parameter für Promise an, um den Rückgabetyp zu verdeutlichen
  • Fehlerbehandlung:Denken Sie daran, catch zu verwenden, um Promise-Fehler zu behandeln
  • all vs. allSettled:Verwende allSettled, wenn du alle Ergebnisse brauchst, und all, wenn du schnelles Scheitern brauchst.
  • async/await:Moderner Code empfiehlt die Verwendung von async/await, da die Syntax prägnanter ist.

Best Practices:Bevorzuge die async/await-Syntax; sie basiert weiterhin auf Promise, liest sich aber wie synchroner Code.

Zusammenfassung

Promise ist der Kern der asynchronen Programmierung in TypeScript.

  • Promise:Ein Container für asynchrone Operationen mit drei Zuständen: pending/fulfilled/rejected
  • then/catch:Verkettung zur Behandlung asynchroner Ergebnisse
  • Promise.all:Wartet, bis alle abgeschlossen sind; schlägt vollständig fehl, wenn eines fehlschlägt
  • Promise.race:Gibt das zuerst abgeschlossene Ergebnis zurück
  • Promise.allSettled:Wartet, bis alle abgeschlossen sind, und gibt jeweils den Status zurück

Empfehlung:Verwende die async/await-Syntax mit Promise, um asynchronen Code sowohl typsicher als auch gut lesbar zu machen.

x Weitere Erweiterungen