Was ist ein Promise?

Ein Promise ist ein Platzhalter für einen zukünftigen Wert, der Folgendes sein kann:

Ein Promise beginnt als pending und wird dauerhaft entweder als fulfilled mit einem Wert oder als rejected mit einem Grund abgeschlossen.

Verständnis von resolve-, reject- und then()-Methoden

Erstellen eines Promise

Um ein Promise zu erstellen, wird eine Funktion mit zwei Parametern übergeben: resolve und reject. Diese Parameter sind Funktionen, die anzeigen, ob die asynchrone Operation erfolgreich abgeschlossen wurde oder fehlgeschlagen ist.

const myPromise = new Promise((resolve, reject) => {
  const success = true; // Simulate whether the task is successful

  if (success) {
    resolve('Task completed successfully!');
  } else {
    reject('Task failed.');
  }
});

• resolve(value): Markiert das Promise als erfüllt (erfolgreich) und übergibt das Ergebnis (value);
• reject(error): Markiert das Promise als abgelehnt (fehlgeschlagen) und übergibt den Fehler.

Verwendung von then() zur Behandlung erfüllter Promises:

Nachdem ein Promise erstellt wurde, kann das Ergebnis mit der Methode then() verarbeitet werden. Diese Methode wird aufgerufen, wenn das Promise erfüllt (aufgelöst) wurde.

myPromise.then(result => {
  console.log(result); // Output: Task completed successfully!
});

In diesem Beispiel erhält die Methode then() den an resolve() übergebenen Wert und führt den Callback mit dem Ergebnis aus. Sie wird nur ausgeführt, wenn das Promise erfolgreich aufgelöst wurde.

Fehlerbehandlung mit .catch()

Promises bieten eine einfache Möglichkeit zur Fehlerbehandlung über die Methode .catch(). Wenn ein Promise abgelehnt wird (fehlschlägt), wird der Fehler innerhalb von .catch() abgefangen und behandelt.

catch()-Methode zur Fehlerbehandlung bei abgelehnten Promises. Sie fängt den von reject() übergebenen Fehler ab und ermöglicht die Verwaltung von Fehlerszenarien.

Verkettung von Promises für sequenzielle asynchrone Operationen

Ein wesentlicher Vorteil von Promises ist die Möglichkeit, sie zu verketten. Dadurch können mehrere asynchrone Operationen nacheinander ausgeführt werden, ohne in das sogenannte Callback-Hell zu geraten. Jede then()-Methode gibt ein neues Promise zurück, sodass mehrere then()-Aufrufe in einer Sequenz verkettet werden können. Die Ergebnisse werden im HTML angezeigt, sobald jedes Promise aufgelöst wird.

Sequenzielle Operationen: Jeder then()-Aufruf gibt ein neues Promise zurück und übergibt das Ergebnis von einer Operation zur nächsten. Dies ermöglicht eine saubere, lineare Abfolge asynchroner Operationen, die den angezeigten Text in HTML aktualisieren.

Fehlerbehandlung: Die Methode .catch() behandelt jeden Fehler, der während einer der Promise-Auflösungen auftritt. Dadurch wird sichergestellt, dass Fehler abgefangen und auf der Seite angezeigt werden, unabhängig davon, wo sie in der Kette auftreten.

Warum Promises verwenden?

1. Vermeidung von Callback-Hell: Promises bieten eine übersichtlichere und besser lesbare Möglichkeit, asynchrone Operationen zu handhaben, als tief verschachtelte Callbacks;
2. Fehlerbehandlung: Promises verfügen über eine integrierte Fehlerbehandlung mit .catch(), wodurch abgelehnte Operationen einfach behandelt werden können;
3. Sequenzielles Verketten: Promises ermöglichen das Ausführen mehrerer asynchroner Operationen in Folge durch Verkettung, was den Code leichter nachvollziehbar und wartbar macht.