Versprechen

Was ist ein Promise?

Ein Promise ist ein Platzhalter für einen zukünftigen Wert, der sein könnte:

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

Verständnis der Methoden resolve, reject und then()

Erstellen eines Promises

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

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.

Verwenden von then(), um erfüllte Promises zu behandeln:

Sobald ein Promise erstellt wurde, können Sie das Ergebnis mit der Methode then() behandeln. Diese Methode wird aufgerufen, wenn das Promise erfüllt (aufgelöst) ist.

In diesem Beispiel empfängt die then()-Methode den Wert, der an resolve() übergeben wird, und führt den Callback mit dem Ergebnis aus. Sie wird nur ausgeführt, wenn das Promise erfolgreich aufgelöst wird.

Fehlerbehandlung mit .catch()

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


              1234567891011121314151617
            
const myPromise = new Promise((resolve, reject) => {
  const success = false; // Simulate a failure

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

myPromise
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error('Error:', error); // Output: Error: Task failed.
  });

catch()-Methode wird verwendet, um Fehler zu behandeln, wenn das Promise abgelehnt wird. Es fängt den von reject() übergebenen Fehler ab und ermöglicht es Ihnen, Fehlerszenarien zu verwalten.

Verkettung von Promises für sequentielle asynchrone Operationen

Ein wesentlicher Vorteil von Promises ist die Möglichkeit, sie zu verketten, sodass Sie mehrere asynchrone Operationen nacheinander ausführen können, ohne in das Callback-Hell zu geraten. Jedes then() gibt ein neues Promise zurück, das es Ihnen ermöglicht, mehrere then()-Aufrufe in einer Sequenz zu verketten, wobei die Ergebnisse im HTML angezeigt werden, sobald jedes Promise aufgelöst wird.

index.html

index.js

index.css

Sequentielle Operationen: Jedes then() gibt ein neues Promise zurück, das das Ergebnis von einer Operation zur nächsten weitergibt. Dies ermöglicht eine saubere, lineare Abfolge von asynchronen Operationen, die den angezeigten Text in HTML aktualisieren.

Fehlerbehandlung: Die .catch()-Methode behandelt jeden Fehler, der während einer der Promise-Auflösungen auftritt. Dies stellt sicher, dass Fehler abgefangen und auf der Seite angezeigt werden, egal wo sie in der Kette auftreten.

Warum Promises verwenden?

Vermeidung von Callback-Hölle: Promises bieten eine sauberere und lesbarere Möglichkeit, asynchrone Operationen zu handhaben, als tief verschachtelte Rückrufe;
Fehlerbehandlung: Promises bieten integrierte Fehlerbehandlung mit .catch(), was es einfach macht, abgelehnte Operationen zu behandeln;
Sequentielles Ketten: Promises ermöglichen es Ihnen, mehrere asynchrone Operationen in Folge durch Ketten auszuführen, was den Code leichter nachvollziehbar und wartbar macht.