Promises – Grundlagen und Praxis in JavaScript

Du hast sicher schon von Promises gehört, wenn du dich mit async‑Code beschäftigst. Kurz gesagt: Ein Promise ist ein Platzhalter für einen Wert, der erst später ankommt. Das klingt kompliziert, ist aber im Grunde nur ein Fahrplan für asynchrone Abläufe.

Wie Promises funktionieren

Ein Promise hat drei Zustände: pending (wartet), fulfilled (erfolgreich) und rejected (Fehler). Du erstellst es mit new Promise((resolve, reject) => { … }). Wenn die Aufgabe fertig ist, rufst du resolve(value) auf – das schiebt den Wert in die fulfilled-Phase. Beim Fehler nutzt du reject(error). Anschließend kannst du mit .then() auf den Erfolg reagieren und mit .catch() den Fehler abfangen.

Ein einfaches Beispiel:

const p = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Fertig'), 1000);
});

p.then(msg => console.log(msg)); // nach 1 s: "Fertig"

Der Promise wird sofort erstellt, aber erst nach einer Sekunde liefert er das Ergebnis. So kannst du weiterarbeiten, ohne den gesamten Code zu blockieren.

Tipps für sauberen Async‑Code

Beim Arbeiten mit mehreren Promises willst du oft Dinge hintereinander schalten. Das nennt man Promise chaining. Jeder .then()-Block gibt wieder einen Promise zurück, sodass du weitere .then()-Aufrufe anhängen kannst.

fetch(url)
  .then(r => r.json())
  .then(data => console.log(data))
  .catch(err => console.error('Fehler:', err));

Wichtiger Hinweis: Wenn du in einem .then()-Block etwas zurückgibst, wird das automatisch in einen Promise verpackt. Das spart dir extra Promise.resolve()-Aufrufe.

Fehlerbehandlung ist ein häufiges Stolperfeld. Ein .catch() am Ende der Kette fängt jeden Fehler ab, egal wo er entstanden ist. Wenn du in der Mitte der Kette den Fehler schon behandelt hast, musst du den Fehler nicht weitergeben.

Manche Entwickler bevorzugen async/await, weil es lesbarer wirkt. Intern nutzt await ja genau dasselbe – es wartet auf einen Promise, bevor es weitergeht. Trotzdem solltest du die Grundprinzipien von Promises verstehen, weil du sonst schnell in Fallen gerätst, wenn du .then() und await mischst.

Ein letzter Trick: Verwende Promise.all(), wenn du mehrere unabhängige Promises gleichzeitig starten willst. Das liefert ein Array mit allen Ergebnissen, sobald jede Aufgabe fertig ist. Bei einem Fehler bricht die ganze Sammlung ab, also prüfe, ob das für deinen Anwendungsfall okay ist.

Promise.all([fetch(a), fetch(b)])
  .then(res => Promise.all(res.map(r => r.json())))
  .then(([aData, bData]) => console.log(aData, bData))
  .catch(err => console.error('Ein Request fehlgeschlagen:', err));

Zusammengefasst: Promises machen async‑Code vorhersehbarer, weil sie klare Zustände und eine einheitliche Fehlerbehandlung bieten. Nutze .then() für einfache Ketten, .catch() für Fehler und Promise.all() für parallele Aufgaben. Wenn du das im Hinterkopf behältst, sparst du dir viel Debugging‑Zeit und dein Code bleibt lesbar.

Probier es gleich aus: Nimm ein kleines Projekt, ersetze ein paar setTimeout-Aufrufe durch Promises und beobachte, wie sich das Verhalten ändert. Du wirst merken, dass async‑Code plötzlich viel kontrollierbarer wird.