Webentwicklung: Grundlagen JavaScript Promise

In diesem Tutorial geht es darum, asynchrone Ergebnisse mit Promises zu verarbeiten, Abläufe zu verketten und Fehler gezielt abzufangen.

Einfügen

1 Was ist ein Promise

Eine Netzwerkantwort oder ein Timer-Ergebnis steht oft erst später bereit. Der übrige Code läuft währenddessen weiter. Ein Promise ist ein Objekt, das das spätere Ergebnis eines Vorgangs oder dessen Fehlschlag beschreibt. Es werden Funktionen registriert, die darauf reagieren, sobald das Ergebnis feststeht.

Ein Promise ist vergleichbar mit einem Abholschein: Man besitzt zunächst den Schein, nicht die bestellte Ware. Übertragen auf JavaScript bedeutet das: Die Variable mit dem Promise enthält noch nicht unmittelbar die später gelieferten Daten.

Die drei Zustände

Zustand	Bedeutung	Reaktion
pending	noch offen	Das Ergebnis oder der Fehler steht noch nicht fest.
fulfilled	erfolgreich erfüllt	Der Erfolgs-Handler in .then(...) erhält den Wert.
rejected	abgelehnt	Ein Fehler-Handler, etwa .catch(...), erhält den Grund.

Ein Promise kann nur einmal endgültig fulfilled oder rejected werden. Dieser Abschluss heißt settled. Ein abgeschlossenes Promise wechselt seinen Zustand nicht mehr. Es lässt sich auch später noch mit Handlern verarbeiten.

Erste Schritte mit Promise

const hello = Promise.resolve("Hallo Mia");<br><br>hello.then(text => {<br>  console.log(text); // Hallo Mia<br>});<br><br>

Promise.resolve(...) erzeugt hier ein bereits erfülltes Promise mit einem Text. Der Teil ".then(...)" registriert die Funktion für den Erfolgsfall. Der Parameter text erhält den gelieferten Wert; der Name ist frei wählbar. Der Handler wird nicht sofort im laufenden Code aufgerufen.

Mit new Promise(...) lässt sich ein Promise neu erzeugen. Der Konstruktor ruft die übergebene Funktion sofort auf. Diese Funktion heißt Executor und erhält zwei Funktionen:

resolve zum Auflösen
reject zum Ablehnen

Die Namen sind Konvention, JavaScript übergibt die Funktionen nach Position.

Ein Promise verwenden

Um das Ergebnis eines Promises zu verarbeiten, nutzt man Method-Chaining:

.then(): Wird ausgeführt, wenn das Promise erfolgreich erfüllt wurde (resolve).
.catch(): Wird ausgeführt, wenn ein Fehler aufgetreten ist (reject).
.finally(): Wird immer ausgeführt, unabhängig davon, ob es erfolgreich war oder nicht (z. B. zum Aufräumen).

meinPromise<br>    .then((ergebnis) => {<br>        console.log("Erfolg:", ergebnis);<br>    })<br>    .catch((fehler) => {<br>        console.error("Fehler:", fehler);<br>    })<br>    .finally(() => {<br>        console.log("Fertig mit der Verarbeitung.");<br>    });

Da Promises meist für asynchrone Aufgaben verwendet werden, ist hier ein praktisches Beispiel. Hier simuliert ein Timer eine Datenabfrage.

function loadProfile( success ) {<br>  return new Promise((resolve, reject) => {<br><br>    setTimeout(() => {<br><br>      if ( success ) {<br><br>        resolve({ name: "Mia", alter: 20 });<br><br>      } else {<br><br>        reject(new Error("Profil nicht gefunden"));<br><br>      }<br><br>    }, <br>     500);<br><br>  });<br>}<br><br>loadProfile(true)<br>  .then(profile => {<br><br>    console.log(profile.name); // Mia<br><br>  })<br>  .catch(error => {<br><br>    console.error(error.message);<br><br>  })<br>  .finally( () => {<br><br>        console.log("Fertig mit der Verarbeitung.");<br><br>  });

Der genaue Ablauf ist folgend:

"loadProfile(true)" wird aufgerufen. Der Executor startet sofort den Timer. return gibt das neue Promise an den Aufrufer zurück; der spätere Profilwert ist zu diesem Zeitpunkt noch nicht verfügbar.
".then(...)" und ".catch(...)" registrieren die Handler. Sie warten nicht blockierend. Der übrige Code kann weiterlaufen, während das Promise pending bleibt.
Nach frühestens 500 Millisekunden läuft der Timer-Callback. Bei true löst "resolve(...)" das Promise hier mit einem gewöhnlichen Objekt auf. Anschließend erhält der Erfolgs-Handler dieses Objekt.
Bei false lehnt reject(...) das Promise mit einem Error-Objekt ab. Der Erfolgs-Handler wird übersprungen und der Fehler erreicht .catch(...). fehler.message enthält die Fehlermeldung.

Wichtig: resolve(...) und reject(...) beenden den Executor nicht wie return. Nachfolgender Code kann noch laufen. Wird resolve(...) ein anderes Promise übergeben, übernimmt das äußere Promise dessen späteren Ausgang; resolve bedeutet dann nicht sofort fulfilled.

Einfügen

2 Ergebnisse durch eine Kette weitergeben

Jeder then-Aufruf liefert ein neues Promise

Oft besteht ein asynchroner Ablauf aus mehreren Schritten, die nacheinander ausgeführt werden müssen. Jeder Schritt hängt vom Ergebnis des vorherigen ab. Jedes .then() gibt automatisch ein neues Promise zurück.

Durch das Chaining (Verketten) von .then()-Aufrufen können diese Schritte sauber hintereinandergereiht werden. Dies vermeidet die berüchtigte „Callback Hell“ (tief verschachtelte Funktionen).

Simulation eines Praxisbeispiels: Schritt-für-Schritt Verarbeitung

Stellen wir uns vor, wir möchten Daten von einem Server laden, diese verarbeiten (z. B. in JSON umwandeln oder formatieren) und danach anzeigen:

function step1Load() {<br>    return new Promise((resolve) => {<br>        setTimeout(() => {<br>            console.log("1. Schritt: Rohdaten geladen.");<br>            resolve("User-ID: 42");<br>        }, 1000);<br>    });<br>}<br><br>function step2Process(data) {<br>    return new Promise((resolve) => {<br>        setTimeout(() => {<br>            console.log(`2. Schritt: Verarbeite -> ${data}`);<br>            resolve({ id: 42, name: "Anna Smith", role: "Admin" });<br>        }, 1000);<br>    });<br>}<br><br>function step3Display(user) {<br>    return new Promise((resolve) => {<br>        setTimeout(() => {<br>            console.log(`3. Schritt: Zeige Benutzer an: ${user.name} (${user.role})`);<br>            resolve("Fertig!");<br>        }, 1000);<br>    });<br>}<br><br>// Die Verkettung der Promises<br>step1Load()<br>    .then((result1) => {<br>        // Gibt ein neues Promise oder einen Wert zurück<br>        return step2Process(result1);<br>    })<br>    .then((result2) => {<br>        // Nimmt das Ergebnis aus Schritt 2 entgegen<br>        return step3Display(result2);<br>    })<br>    .then((finalResult) => {<br>        console.log("Alles abgeschlossen:", finalResult);<br>    })<br>    .catch((error) => {<br>        // Fängt Fehler ab, egal in welchem Schritt sie passieren!<br>        console.error("Ein Fehler ist aufgetreten:", error);<br>    });

Die Verkettung hat wichtige Vorteile

Flache Struktur: Statt Funktionen ineinander zu verschachteln, liest sich der Code wie eine klare Liste von Anweisungen von oben nach unten.

Zentrales Error Handling: Ein einziges .catch() am Ende der Kette reicht aus, um Fehler abzufangen, die in irgendeinem der vorherigen .then()-Blöcke auftreten. Wenn ein Fehler geworfen wird, springt JavaScript direkt zum nächsten .catch() und überspringt alle dazugehörigen .then()-Blöcke.

Einfügen

3 Praxisbeispiel: Die fetch() - Funktion

Will man Daten von einem Server abrufen, kann man in JavaScript gut fetch() nutzen. Da eine Internetverbindung Zeit braucht, liefert fetch() nicht sofort die Daten, sondern sofort ein Promise.

fetch("user/1")<br>    .then((response) => {<br><br>        // Schritt 1: Die rohe Antwort kommt an. <br>        // response.json() gibt WIEDER ein Promise zurück!<br>        return response.json();<br><br>    })<br>    .then((userData) => {<br><br>        // Schritt 2: Hier haben wir die fertig umgewandelten Daten<br>        console.log("Benutzername:", userData.name);<br>        console.log("E-Mail:", userData.email);<br><br>    })<br>    .catch((error) => {<br>        // Fängt Netzwerkfehler oder abgebrochene Verbindungen ab<br>        console.error("Fehler beim Laden der Daten:", error);<br>    });

Warum nutzen moderne JS-Funktionen so oft Promises?

An diesem fetch()-Beispiel sieht man wunderbar, warum sich Promises in JavaScript als Standard durchgesetzt haben.

Man muss Promises nicht immer selbst mit new Promise() schreiben. Moderne Browser-Funktionen (wie fetch(), Datenbank-Treiber, Datei-APIs etc.) geben oft ein Promise zurück.

Promises sind eine elegante Möglichkeit verschiedene asynchrone Schritte wie an einer Perlenkette hintereinander aufzureihen.

Einfügen

4 Praxisbeispiel: Ein Bild mit fetch() laden

Will man ein Bild mit fetch() laden, liefert die Antwort (response) kein JSON, sondern einen sogenannten Blob (Binary Large Object). Da das Lesen dieser Binärdaten ebenfalls Zeit kostet, gibt auch response.blob() wieder ein Promise zurück.

fetch("https://spiel-programmieren.de/Images/CoverNeueBlogArtikel.jpg")<br>    .then((response) => {<br><br>        // Schritt 1: Prüfen, ob das Laden erfolgreich war<br>        if (!response.ok) {<br>            throw new Error(`HTTP-Fehler! Status: ${response.status}`);<br>        }<br>        <br>        // Schritt 2: Die Bilddaten als Blob (Binärdaten) einlesen.<br>        // response.blob() gibt WIEDER ein Promise zurück!<br>        return response.blob();<br><br>    })<br>    .then((imageBlob) => {<br><br>        // Schritt 3: Aus dem Blob eine temporäre lokale Browser-URL erstellen<br>        const imageObjectURL = URL.createObjectURL(imageBlob);<br>        <br>        // Ein HTML-<img>-Element erzeugen und das Bild anzeigen<br>        const imgElement = document.createElement("img");<br>        imgElement.src = imageObjectURL;<br>        document.body.appendChild(imgElement);<br>        <br>        console.log("Bild erfolgreich geladen und im Dokument eingefügt!");<br><br>    })<br>    .catch((error) => {<br><br>        // Fängt Netzwerkfehler oder falsche URLs ab<br>        console.error("Fehler beim Laden des Bildes:", error);<br><br>    });

Das Beispiel zeigt die Stärke von Promises gut auf:

Zunächst wird auf den Server gewartet. Anschließen darauf, dass die Bilddaten im Arbeitsspeicher als Binärdatei bereitstehen. Dank dem .then() - Chaining entsteht eine saubere Kette: Daten holen > in Binärdaten umwandeln > Bild anzeigen.

Die Fehlerbehandlung erfolgt übersichtlich zentral: Egal, ob die Internetverbindung abbricht oder die Bild-URL ungültig ist (response.ok fehlschlägt) – das .catch() am Ende fängt jeden Fehler im gesamten Ablauf zuverlässig ab.

Einfügen

5 Die zwei Schlüsselwörter: async / await

Im Grunde sind async und await nur eine „Schönheitsreparatur“ (Syntactic Sugar) für Promises. Es sorgt dafür, dass asynchroner Code genau so aussieht und sich liest wie ganz normaler, sequenzieller Code (von oben nach unten).

Das Schlüsselwort async steht vor einer Funktionsdefinition und sagt damit, dass diese Funktion asynchron arbeitet und immer ein Promise zurückgibt.

Das Schlüsselwort await kann nur innerhalb von async-Funktionen genutzt werden. Es wird hier signalisiert, das gewartet werden muss, bis das Promise fertig ist( resolve oder reject ), bevor es in der nächsten Zeile weitergeht.

Das Bild-Laden-Beispiel mit async / await

async function showImage(url) {<br>    try {<br>        // 1. Warten, bis die Daten geladen sind<br>        const response = await fetch(url);<br>        <br>        // 2. Warten, bis das Bild in Binärdaten (Blob) umgewandelt ist<br>        const imageBlob = await response.blob();<br>        <br>        // 3. Bild im HTML anzeigen<br>        const imgElement = document.createElement("img");<br>        imgElement.src = URL.createObjectURL(imageBlob);<br>        document.body.appendChild(imgElement);<br><br>    } catch (error) {<br>        // Fängt Fehler aus allen Schritten ab<br>        console.error("Fehler:", error);<br>    }<br>}<br><br>// Funktion aufrufen<br>showImage("https://spiel-programmieren.de/Images/CoverNeueBlogArtikel.jpg");

Der Code liest sich wie eine normale Schritt-für-Schritt-Anleitung. Die Fehlerbehandlung erfolgt mit try-catch, das man aus fast jeder Programmiersprache kennt.

Einfügen

Fazit: Warum sich Promises lohnen

Nahezu alle modernen Browser-APIs (wie fetch(), der Zugriff auf Kameras/Mikrofone, Service Worker oder Datenbanken) sowie Node.js-Bibliotheken basieren heute auf Promises.

Promises beenden die unübersichtliche Verschachtelung alter Callback-Funktionen („Callback Hell“) und machen komplexe, asynchrone Abläufe wieder von oben nach unten lesbar.

Fehler in mehrstufigen asynchronen Prozessen müssen nicht an jeder einzelnen Stelle separat abgefangen werden – ein zentrales .catch() reicht aus.

Die modernste und eleganteste Form, asynchronen Code in JavaScript zu schreiben (async / await), ist lediglich eine optische Verschönerung (Syntactic Sugar) von Promises. Wer Promises versteht, hat async / await automatisch verstanden.

Einfügen

Webentwicklung: Grundlagen JavaScript Promise

1 Was ist ein Promise

2 Ergebnisse durch eine Kette weitergeben

3 Praxisbeispiel: Die fetch() - Funktion

4 Praxisbeispiel: Ein Bild mit fetch() laden

5 Die zwei Schlüsselwörter: async / await

Fazit: Warum sich Promises lohnen

Ist Elektronik und Arduino dein Ding?

Lernen macht hungrig oder? Dann koch dir doch was mit Hello Fresh!

Interesse an Smart Home, aber günstig? Dann los, ELV hat da was!

Dein Feedback ist uns wichtig

Bei Weitergabe bitte beachten