Promises

Ein Promise (Versprechen) ist ein Objekt, das das Ergebnis einer asynchronen Aufgabe repräsentiert – zum Beispiel das Laden von Daten oder das Warten auf einen Timer. Statt den Code zu blockieren, sagt dir ein Promise später Bescheid, ob die Aufgabe erfolgreich war oder fehlgeschlagen ist.

Promises sind der Standard-Weg in JavaScript, um mit asynchronem Code umzugehen. Die Grundlagen dazu kennst du bereits aus dem Kapitel Asynchronität (Einführung).

Was ist ein Promise?

Stell dir vor, du bestellst online etwas: Du bekommst eine Bestellbestätigung, musst aber nicht vor der Tür warten, bis das Paket kommt. Du machst weiter – und wirst informiert, sobald es da ist.

Genau so funktioniert ein Promise: Du startest eine Aufgabe und bekommst ein Promise-Objekt zurück. Später reagierst du auf das Ergebnis mit then() (Erfolg) oder catch() (Fehler).

Die drei Zustände

Jedes Promise befindet sich in genau einem dieser Zustände:

Ein Promise kann nur einmal erfüllt oder abgelehnt werden. Danach ändert sich der Zustand nicht mehr.

then() und catch()

Mit then() reagierst du auf ein erfolgreiches Ergebnis. Mit catch() fängst du Fehler ab:

1const promise = new Promise(function(resolve, reject) {
2    setTimeout(function() {
3        resolve("Daten geladen!");
4    }, 1000);
5});
6
7promise
8    .then(function(ergebnis) {
9        console.log(ergebnis);
10    })
11    .catch(function(fehler) {
12        console.error("Fehler:", fehler);
13    });

Der Code nach dem Promise läuft sofort weiter – then() wird erst aufgerufen, wenn die Aufgabe fertig ist.

Was passiert bei einem Fehler?

1const promise = new Promise(function(resolve, reject) {
2    const erfolg = false;
3
4    if (erfolg) {
5        resolve("Alles okay!");
6    } else {
7        reject("Etwas ist schiefgelaufen");
8    }
9});
10
11promise
12    .then(function(ergebnis) {
13        console.log(ergebnis);
14    })
15    .catch(function(fehler) {
16        console.log("Fehler:", fehler);
17    });

Wird ein Promise abgelehnt, springt die Ausführung direkt in catch() – then() wird in diesem Fall übersprungen.

Ein Promise erstellen

Mit new Promise() erstellst du selbst ein Promise. Die Funktion bekommt zwei Parameter: resolve (Erfolg) und reject (Fehler):

1function datenLaden() {
2    return new Promise(function(resolve, reject) {
3        setTimeout(function() {
4            resolve({ name: "Anna", alter: 25 });
5        }, 1000);
6    });
7}
8
9datenLaden()
10    .then(function(user) {
11        console.log(user.name);
12        console.log(user.alter);
13    });

Viele Browser-Funktionen geben bereits ein Promise zurück – zum Beispiel fetch() beim Laden von Daten aus dem Internet. Dazu mehr im Kapitel fetch und APIs.

Kurz gesagt: Ein Promise steht für eine asynchrone Aufgabe. Mit then() verarbeitest du das Ergebnis, mit catch() behandelst du Fehler. Im nächsten Kapitel lernst du mit async/await eine noch lesbarere Schreibweise kennen.