Was ist ein Versprechen?

Ein Versprechen in JavaScript ist wie ein „Versprechen“, das Sie machen, etwas in der Zukunft zu tun. Es handelt sich um ein Objekt, das den eventuellen Abschluss (oder Fehler) einer asynchronen Aufgabe und den daraus resultierenden Wert darstellt. Einfach ausgedrückt fungiert ein Promise als Platzhalter für einen Wert, der noch nicht verfügbar ist, aber in Zukunft verfügbar sein wird.

Versprechensstaaten

Versprechen können in einem von drei Zuständen existieren:

1. Ausstehend: Der Anfangszustand eines Versprechens, in dem es noch auf den Abschluss der asynchronen Aufgabe wartet.
2. Erfüllt: Der Zustand, in dem das Versprechen erfolgreich abgeschlossen wird und der resultierende Wert verfügbar ist.
3. Abgelehnt: Der Zustand, in dem das Versprechen fehlschlägt und ein Fehler anstelle des erwarteten Werts zurückgegeben wird.

Wie funktioniert ein Versprechen?

Ein Promise wird mit dem Promise-Konstruktor erstellt, der zwei Parameter benötigt: Auflösung und Ablehnung – beides sind Funktionen.

Wenn der asynchrone Vorgang erfolgreich ist, rufen Sie die Auflösungsfunktion auf, um das Versprechen zu erfüllen.
Wenn etwas schief geht, rufen Sie die Ablehnungsfunktion auf, um anzuzeigen, dass das Versprechen aufgrund eines Fehlers abgelehnt wurde.
Sie können das Ergebnis eines Versprechens mit .then() für den Erfolg und .catch() für die Fehlerbehandlung verarbeiten.

Beispiel: Ein Versprechen erstellen und einlösen

const fetchData = new Promise((resolve, reject) => {
  // Simulate an asynchronous task like fetching data from a server
  setTimeout(() => {
    const data = "Some data from the server";

    // Simulate success and resolve the promise
    resolve(data);

    // You can also simulate an error by rejecting the promise
    // reject(new Error("Failed to fetch data"));
  }, 1000);
});

// Consuming the Promise
fetchData
  .then((data) => {
    console.log("Data fetched:", data);
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });

Die Auflösung (Daten) gibt die erfolgreichen Daten zurück, wenn das Versprechen erfüllt ist.
Wenn etwas schief geht, wirft „reject(error)“ einen Fehler aus, der mit .catch() behandelt werden kann.

Was ist Promise Chaining?

Promise Chaining ist der Prozess der Ausführung einer Folge asynchroner Aufgaben nacheinander mithilfe von Promises. Jede .then()-Methode in der Kette wird ausgeführt, nachdem die vorherige erfüllt wurde.

Warum Promise Chaining verwenden?

Es ermöglicht Ihnen, sauberen, lesbaren Code für die Verarbeitung mehrerer asynchroner Vorgänge in einer bestimmten Reihenfolge zu schreiben. Jedes .then() kann einen Wert zurückgeben, der an das nächste .then() in der Kette übergeben wird, sodass Sie Aufgaben Schritt für Schritt erledigen können.

Beispiel: Verkettung mehrerer Versprechen

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000); // Initial async task resolves with 1
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;   // Returns 2 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 2
    return result * 3;   // Returns 6 to the next .then()
  })
  .then((result) => {
    console.log(result); // Logs: 6
    return result * 4;   // Returns 24 to the next .then()
  });

In diesem Beispiel:

Das Versprechen beginnt mit der Auflösung bei 1 nach 1 Sekunde.
Jedes nachfolgende .then() empfängt das Ergebnis des vorherigen, verdoppelt oder verdreifacht es und übergibt es an das nächste .then().
Das Ergebnis wird Schritt für Schritt protokolliert: 1, 2, 6.
Fehlerbehandlung bei der Verkettung
Mit .catch() können Sie jeden Fehler in der Promise-Kette abfangen. Wenn irgendein .then() fehlschlägt, stoppt die Kette und der Fehler wird an den .catch()-Block weitergeleitet.

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;
  })
  .then((result) => {
    throw new Error("Oops, something went wrong!");
  })
  .catch((error) => {
    console.error("Caught error:", error.message); // Catches the error
  });

Hauptvorteile von Versprechen

• Vermeidet die Callback-Hölle: Versprechen vereinfachen die Verwaltung mehrerer asynchroner Vorgänge, die sonst zu tief verschachtelten Callbacks führen (auch als Callback-Hölle bekannt).
• Fehlerbehandlung: Sie können alle Fehler in einer Kette mit einem einzigen .catch() am Ende behandeln.
• Sequentielle Ausführung: Durch die Verkettung von Versprechen wird sichergestellt, dass asynchrone Aufgaben in der richtigen Reihenfolge ausgeführt werden, sodass Code leichter nachvollziehbar ist.

Abschluss

Promises sind ein leistungsstarkes Tool in JavaScript zur Bearbeitung asynchroner Aufgaben. Mit Promise Chaining können Sie mehrere asynchrone Vorgänge sauber, lesbar und sequenziell verwalten. Wenn Sie verstehen, wie man Promises erstellt, nutzt und verkettet, sind Sie auf dem besten Weg, die asynchrone Programmierung in JavaScript zu meistern!