2 Min

JavaScript Promises sind ein Mechanismus, um asynchrone Operationen auf eine strukturierte und effiziente Weise zu handhaben. Sie ermöglichen es, Code zu schreiben, der auf das Ergebnis einer asynchronen Aufgabe reagiert, sobald diese abgeschlossen ist, ohne dabei in die Tiefe verschachtelte Callbacks zu geraten (auch als „Callback-Hell“ bekannt).

Wie funktionieren Promises?

Ein Promise in JavaScript ist ein Objekt, das einen zukünftigen Wert repräsentiert – entweder den erfolgreichen Ausgang einer Operation oder den Fehler, der während der Ausführung auftritt.

Ein Promise kann in einem von drei Zuständen sein:

  1. Pending (ausstehend): Das Promise wurde erstellt, aber das Ergebnis der Operation ist noch nicht bekannt.
  2. Fulfilled (erfüllt): Die asynchrone Operation war erfolgreich, und das Promise wird mit einem Wert aufgelöst.
  3. Rejected (abgelehnt): Die asynchrone Operation ist fehlgeschlagen, und das Promise wird mit einem Fehler abgelehnt.

Grundstruktur eines Promises

Ein Promise wird durch den Promise-Konstruktor erstellt, der eine Funktion als Parameter nimmt. Diese Funktion hat zwei Argumente: resolve und reject. Wenn die Operation erfolgreich ist, wird resolve aufgerufen, andernfalls reject.

Beispiel: Ein einfaches Promise

const myPromise = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve("Die Operation war erfolgreich!");
  } else {
    reject("Die Operation ist fehlgeschlagen.");
  }
});

In diesem Beispiel prüft das Promise, ob success wahr ist. Wenn ja, wird das Promise mit dem Wert "Die Operation war erfolgreich!" aufgelöst, andernfalls wird es mit einer Fehlermeldung abgelehnt.

Verwendung von Promises

Um auf das Ergebnis eines Promises zu reagieren, gibt es zwei Hauptmethoden:

  • .then(): Wird aufgerufen, wenn das Promise erfüllt wurde.
  • .catch(): Wird aufgerufen, wenn das Promise abgelehnt wurde.

Beispiel:

myPromise
  .then((message) => {
    console.log(message); // "Die Operation war erfolgreich!"
  })
  .catch((error) => {
    console.error(error); // "Die Operation ist fehlgeschlagen."
  });

Promise Chaining (Verkettung von Promises)

Promises können verkettet werden, indem man ein Promise in der then()-Methode zurückgibt. Dies ist nützlich, wenn mehrere asynchrone Operationen nacheinander ausgeführt werden sollen.

Beispiel:

const firstPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Erste Aufgabe abgeschlossen");
  }, 1000);
});

firstPromise
  .then((result) => {
    console.log(result); // "Erste Aufgabe abgeschlossen"
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve("Zweite Aufgabe abgeschlossen");
      }, 1000);
    });
  })
  .then((result) => {
    console.log(result); // "Zweite Aufgabe abgeschlossen"
  })
  .catch((error) => {
    console.error(error);
  });

Promise.all()

Mit Promise.all() können mehrere Promises gleichzeitig ausgeführt werden. Es wartet darauf, dass alle Promises entweder erfüllt sind, oder gibt einen Fehler zurück, wenn eines der Promises abgelehnt wird.

Beispiel:

const promise1 = Promise.resolve("Promise 1 abgeschlossen");
const promise2 = new Promise((resolve) => setTimeout(resolve, 2000, "Promise 2 abgeschlossen"));

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results); // ["Promise 1 abgeschlossen", "Promise 2 abgeschlossen"]
  })
  .catch((error) => {
    console.error(error);
  });

Promise.race()

Promise.race() gibt das Promise zurück, das als erstes entweder erfüllt oder abgelehnt wird.

Beispiel:

const slowPromise = new Promise((resolve) => setTimeout(resolve, 3000, "Langsame Operation"));
const fastPromise = new Promise((resolve) => setTimeout(resolve, 1000, "Schnelle Operation"));

Promise.race([slowPromise, fastPromise])
  .then((result) => {
    console.log(result); // "Schnelle Operation"
  })
  .catch((error) => {
    console.error(error);
  });

Hier gewinnt das Promise, das am schnellsten abgeschlossen wird, also in diesem Fall fastPromise.

Zusammenfassung:

Promises sind ein leistungsfähiges Werkzeug, um asynchrone Operationen in JavaScript zu verwalten. Sie bieten eine klarere und wartungsfreundlichere Alternative zu Callbacks und verbessern die Struktur von Code, insbesondere bei komplexen Abläufen. Promises ermöglichen es, asynchronen Code prägnanter und strukturierter zu schreiben, insbesondere in Kombination mit Verkettung und Methoden wie Promise.all() und Promise.race().

Updated:

Similar Content