Zum Hauptinhalt springen
Veröffentlicht am

Promises in JavaScript

Teilen:

Einführung

Promises sind ein grundlegender Bestandteil der asynchronen Programmierung in JavaScript und bieten eine besser handhabbare und lesbarere Möglichkeit, mit Operationen umzugehen, die Zeit zum Abschließen benötigen. In diesem Artikel werden wir erläutern, was Promises sind, wie man sie einsetzt und wie man das Beste aus ihnen herausholt.

Was sind Promises?

Eine Promise in JavaScript ist ein Objekt, das die eventuelle Erfüllung oder das Scheitern einer asynchronen Operation darstellt. Sie ermöglicht es, asynchronen Code so zu schreiben, dass er fast genauso einfach zu verstehen und zu warten ist wie synchroner Code.

Eigenschaften von Promises

  • Zustand: Eine Promise hat drei Zustände: ausstehend (pending), erfüllt (fulfilled) oder abgelehnt (rejected).
  • Unveränderlichkeit: Sobald eine Promise erfüllt oder abgelehnt wurde, kann ihr Zustand nicht mehr geändert werden.

Promises Erstellen und Verwenden

Du kannst eine Promise mithilfe des Promise-Konstruktors und der Methoden resolve und reject erstellen.

Beispiel zur Erstellung einer Promise

let versprechen = new Promise((resolve, reject) => {
  let erfolg = true; // Simuliert eine Operation

  if (erfolg) {
    resolve('Operation erfolgreich');
  } else {
    reject('Operation fehlgeschlagen');
  }
});

Promises Konsumieren

Um den Wert einer erfüllten Promise zu verarbeiten oder Fehler zu behandeln, verwendest du die Methoden then und catch.

versprechen
  .then((wert) => {
    console.log(wert); // 'Operation erfolgreich'
  })
  .catch((fehler) => {
    console.error(fehler);
  });

Verkettung von Promises

Einer der größten Vorteile von Promises ist die Möglichkeit, sie zu verketten, was die Behandlung mehrerer sequenzieller asynchroner Operationen vereinfacht.

Beispiel zur Verkettung

function ersteOperation() {
  return new Promise((resolve) => {
    resolve('Ergebnis der ersten Operation');
  });
}

function zweiteOperation(vorherigesErgebnis) {
  return new Promise((resolve) => {
    resolve(`Ergebnis der zweiten Operation nach: ${vorherigesErgebnis}`);
  });
}

ersteOperation()
  .then((ergebnis) => zweiteOperation(ergebnis))
  .then((endErgebnis) => console.log(endErgebnis));

Promises und Fehlerbehandlung

Promises vereinfachen auch die Fehlerbehandlung bei asynchronen Operationen und ermöglichen es, Fehler an jeder Stelle der Promise-Kette abzufangen.

Verwendung von Catch für Fehler

versprechen
  .then((wert) => {
    // Verarbeitung des Werts
  })
  .catch((fehler) => {
    console.error('Abgefangener Fehler:', fehler);
  });

Promises und Parallele Operationen

Neben sequenziellen Operationen sind Promises auch nützlich, um mehrere asynchrone Operationen zu verwalten, die parallel ausgeführt werden können.

Promise.all für die Parallele Ausführung

Promise.all wird verwendet, um auf den Abschluss mehrerer Promises zu warten.

Promise.all([ersteOperation(), zweiteOperation('Anfangswert')])
  .then((ergebnisse) => {
    console.log('Alle Ergebnisse:', ergebnisse);
  })
  .catch((fehler) => {
    console.error('Fehler in einer der Operationen:', fehler);
  });

Best Practices und Tipps

  1. Übermäßige Verschachtelung vermeiden: Verwende die Verkettung von Promises anstatt Callbacks zu verschachteln, um die Komplexität zu reduzieren.
  2. Fehlerbehandlung: Stelle sicher, dass du Fehler in Promises immer behandelst, insbesondere in Promise-Ketten.
  3. Einsatz von Async/Await: Für eine noch sauberere Syntax solltest du async/await in Betracht ziehen, das es ermöglicht, asynchronen Code auf synchrone Weise zu schreiben.

Fazit

Promises haben die Art und Weise, wie asynchroner Code in JavaScript geschrieben wird, revolutioniert und bieten einen klareren und besser handhabbaren Ansatz für Operationen, die Zeit zum Abschließen benötigen. Die Beherrschung von Promises ist für jeden Entwickler, der mit JavaScript arbeitet, unverzichtbar – insbesondere in modernen Webanwendungen.

Happy coding!