Articles
Einführung in TypeScript
Promise-Klasse in TypeScript

Promise-Klasse in TypeScript

Dieser Artikel erklärt die Promise-Klasse in TypeScript.

YouTube Video

Promise

Die Promise-Klasse in TypeScript ist grundsätzlich dieselbe wie die Promise in JavaScript. Ein Promise ist eine eingebaute Klasse zur Handhabung asynchroner Vorgänge, die das Ergebnis eines asynchronen Vorgangs repräsentiert, wenn dieser abgeschlossen ist. Hier erklären wir die grundlegende Nutzung von Promises und verwandte Konzepte.

Grundlegende Verwendung

Erstellen eines Promise:

Ein Promise-Objekt wird verwendet, um asynchrone Vorgänge einzubetten. Ein Promise wird mit new Promise(executor) erstellt, und es führt die asynchronen Vorgänge darin aus. Der Executor nimmt zwei Funktionen, resolve und reject, als Argumente entgegen.

1const myPromise = new Promise<number>((resolve, reject) => {
2    // Perform asynchronous operations
3    const success = true; // This is just an example
4    if (success) {
5        resolve(42); // In case of success
6    } else {
7        reject('Failed'); // In case of failure
8    }
9});

Verwendung eines Promise:

Das erstellte Promise wird mit then() und catch() verarbeitet.

1myPromise.then((value) => {
2    console.log(`Success: ${value}`); // Process the value passed with resolve
3}).catch((error) => {
4    console.error(`Error: ${error}`); // Handle the error passed with reject
5});

finally()-Methode 

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = false; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11myPromise.then((value) => {
12    console.log(`Success: ${value}`); // Process the value passed with resolve
13}).catch((error) => {
14    console.error(`Error: ${error}`); // Handle the error passed with reject
15}).finally(() => {
16    console.log('The operation has completed');
17});
  • Die finally()-Methode definiert Code, der immer ausgeführt wird, unabhängig davon, ob das Promise erfüllt oder abgelehnt wird.

Verkettung von Promises:

Durch Verkettung von then() nach then() können mehrere asynchrone Vorgänge in Reihe verbunden werden.

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = true; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11myPromise
12    .then((value) => {
13        console.log(`Success: ${value}`);
14        return value + 1; // Pass the value to the next then
15    })
16    .then((newValue) => {
17        console.log(`New value: ${newValue}`);
18    })
19    .catch((error) => {
20        console.error(`Error: ${error}`);
21    });

async/await:

In TypeScript können Promises einfacher mit async/await gehandhabt werden. Innerhalb einer async-Funktion können Sie das Schlüsselwort await verwenden, um auf das Ergebnis eines Promise zu warten.

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = true; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11async function asyncFunction() {
12    try {
13        const value = await myPromise;
14        console.log(`Success: ${value}`);
15    } catch (error) {
16        console.error(`Error: ${error}`);
17    }
18}
19
20asyncFunction();

Promise-Methoden

Promise.all()

Promise.all führt mehrere Promises gleichzeitig aus und wartet, bis alle erfüllt sind.

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.resolve(2);
 3const promise3 = Promise.resolve(3);
 4
 5Promise.all([promise1, promise2, promise3])
 6    .then((results) => {
 7        console.log(results);  // [1, 2, 3]
 8    })
 9    .catch((error) => {
10        console.error('Error :', error);
11    });
  • then() wird nur aufgerufen, wenn alle Promises erfüllt sind. catch() wird aufgerufen, wenn auch nur eines fehlschlägt.

Promise.race()

Promise.race gibt das Ergebnis des ersten abgeschlossenen Promise unter mehreren Promises zurück.

1const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
2const promise2 = new Promise((resolve) => setTimeout(resolve, 500, 'Second'));
3
4Promise.race([promise1, promise2]).then((result) => {
5    console.log(result);  // "First"
6});
  • Wie in diesem Beispiel wird das Ergebnis des ersten abgeschlossenen Promise zurückgegeben.

Promise.allSettled()

Promise.allSettled wartet auf den Abschluss aller Promises und gibt ein Array aller Ergebnisse zurück, einschließlich sowohl erfüllter als auch abgelehnter.

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.reject("Failed");
 3const promise3 = Promise.resolve(3);
 4
 5Promise.allSettled([promise1, promise2, promise3])
 6    .then((results) => {
 7        results.forEach(result => console.log(result));
 8        // [
 9        //   { status: 'fulfilled', value: 1 },
10        //   { status: 'rejected', reason: 'Failed' },
11        //   { status: 'fulfilled', value: 3 }
12        // ]
13    });
  • then() wird aufgerufen, sobald alle Promises abgeschlossen sind (egal ob erfüllt oder abgelehnt). Jedes Ergebnis enthält eine status-Eigenschaft ('fulfilled' oder 'rejected'). Fehlschläge wirken sich nicht auf die anderen Vorgänge aus.

Promise.any()

Promise.any wartet, bis das erste Promise erfüllt ist, und gibt dieses zurück.

 1const promise1 = new Promise((resolve) => setTimeout(() => resolve("A ok"), 300));
 2const promise2 = new Promise((_, reject) => setTimeout(() => reject("B fail"), 100));
 3const promise3 = new Promise((resolve) => setTimeout(() => resolve("C ok"), 200));
 4
 5Promise.any([promise1, promise2, promise3])
 6    .then(value => {
 7        // Logs the first fulfilled value ("C ok")
 8        console.log("first fulfilled:", value);
 9    })
10    .catch(err => {
11        console.log("should not reach here in this example:", err);
12    });
  • Es gibt den ersten erfüllten Wert unter mehreren Promises zurück.

Zusammenfassung

Durch die Verwendung von TypeScript können Sie die Typen von Promises korrekt angeben, was Ihnen ermöglicht, streng typisierte Programme zu schreiben. Dies hilft, Fehler frühzeitig während der Entwicklung zu erkennen, indem der Typ des von einem Promise zurückgegebenen Wertes im Voraus angegeben wird.

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

Fehlerbehandlung in TypeScript