Promises vs. Observables in Angular: Ein Vergleich

In der Welt der modernen Webentwicklung, insbesondere in Angular, gibt es zwei gängige Methoden zur asynchronen Datenverarbeitung: Promises und Observables. Beide Konzepte sind Teil der reaktiven Programmierung und ermöglichen es, Operationen zu verzögern und mit asynchronen Daten zu arbeiten. Doch obwohl Promises und Observables in manchen Situationen austauschbar erscheinen, gibt es wesentliche Unterschiede zwischen ihnen. In diesem Artikel werfen wir einen genaueren Blick auf die Eigenschaften, Vorteile und Nachteile beider Ansätze und wann welcher Ansatz in Angular-Projekten sinnvoller ist.

Was sind Promises?

Ein Promise ist ein JavaScript-Objekt, das einen zukünftigen Wert repräsentiert. Promises wurden eingeführt, um Callbacks zu ersetzen und die Handhabung von asynchronem Code zu vereinfachen. Ein Promise kann sich in drei Zuständen befinden:

1. Pending (wartend): Das Promise wurde erstellt, aber der asynchrone Vorgang ist noch nicht abgeschlossen.
2. Fulfilled (erfüllt): Der asynchrone Vorgang wurde erfolgreich abgeschlossen und ein Wert steht zur Verfügung.
3. Rejected (abgelehnt): Der asynchrone Vorgang ist fehlgeschlagen, und ein Fehler wurde zurückgegeben.

Ein Promise wird einmal erstellt und kann nicht abonniert oder wiederholt werden. Sobald es aufgelöst (fulfilled) oder abgelehnt (rejected) wurde, ändert sich sein Zustand nicht mehr.

Beispiel für ein Promise

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Erfolgreich abgeschlossen!");
  }, 2000);
});

myPromise.then(response => console.log(response)).catch(error => console.error(error));

In diesem Beispiel wird das Promise nach zwei Sekunden aufgelöst, und der Wert "Erfolgreich abgeschlossen!" wird in der Konsole ausgegeben.

Vorteile von Promises

• Einfach zu verstehen: Promises sind leicht zu lesen und zu verstehen, da sie eine feste Ablaufstruktur haben.
• Eingebaut in JavaScript: Da Promises ein nativer Teil von JavaScript sind, funktionieren sie auch ohne zusätzliche Bibliotheken.
• Einmalige Ausführung: Promises werden nach ihrer Auflösung nicht neu ausgeführt, was den Speicherbedarf reduzieren kann.

Nachteile von Promises

• Nicht wiederholbar: Promises führen eine Operation nur einmal aus und sind danach nicht mehr verwendbar.
• Keine Unterstützung für Multi-Werte-Streams: Promises sind nur für einen einzelnen Wert geeignet und können keine kontinuierliche Datenquelle verarbeiten.
• Eingeschränkte Flexibilität: Da sie nur ein Ergebnis liefern können, sind sie weniger flexibel für komplexe Anwendungsfälle.

Was sind Observables?

Observables sind Teil der Reactive Extensions for JavaScript (RxJS), einem Bibliothekspaket für reaktive Programmierung in JavaScript. Im Gegensatz zu Promises, die nur einen einzigen Wert zurückgeben, ermöglichen Observables das Arbeiten mit einer Datenquelle, die mehrere Werte über die Zeit liefert. Observables können viele Zustände und Werte verarbeiten und geben Entwicklern mehr Kontrolle über asynchrone Abläufe.

Ein Observable kann abonniert werden, wodurch es beginnt, Werte zu emittieren. Die drei Zustände eines Observables sind:

1. Next: Das Observable sendet einen neuen Wert.
2. Error: Das Observable sendet einen Fehler und wird beendet.
3. Complete: Das Observable wird abgeschlossen und emittiert keine weiteren Werte.

Beispiel für ein Observable

import { Observable } from 'rxjs';

const myObservable = new Observable(observer => {
  setTimeout(() => {
    observer.next("Wert 1");
    observer.complete();
  }, 2000);
});

myObservable.subscribe({
  next: value => console.log(value),
  error: error => console.error(error),
  complete: () => console.log("Fertig!")
});

In diesem Beispiel wird das Observable ebenfalls nach zwei Sekunden einen Wert senden und dann abgeschlossen.

Vorteile von Observables

• Multi-Werte-Stream: Observables können mehrere Werte über die Zeit emittieren, was sie ideal für Datenströme (z.B. Websockets, Benutzereingaben) macht.
• Flexibilität und Kontrollierbarkeit: Durch die RxJS-Operatoren können Observables transformiert, gefiltert und kombiniert werden.
• Lazy Evaluation: Observables starten erst, wenn sie abonniert werden, was Ressourcen spart.
• Kombinierbarkeit: Observables können kombiniert und verkettet werden, um komplexe Datenströme zu erstellen.

Nachteile von Observables

• Komplexität: RxJS und Observables haben eine steile Lernkurve, insbesondere mit fortgeschrittenen Operatoren.
• Erhöhte Abhängigkeiten: Observables sind nicht Teil von JavaScript selbst, sondern erfordern die RxJS-Bibliothek.
• Potenzial für Speicherlecks: Wenn Subscriptions nicht korrekt beendet werden, können Observables Speicherlecks verursachen.

Vergleich: Promises vs. Observables

Wann verwendet man Promises und wann Observables in Angular?

Promises:

• Gut geeignet für einfache, einmalige HTTP-Anfragen.
• Wenn keine Multi-Werte benötigt werden, z. B. bei Login- und Authentifizierungsanfragen.
• Wenn die Anwendung eine einfache Lösung ohne die zusätzliche Komplexität von RxJS benötigt.

Observables:

• Ideal für kontinuierliche Datenströme (z. B. WebSocket-Verbindungen, UI-Ereignisse).
• Wenn mehrere Operatoren benötigt werden, um die Daten zu transformieren.
• Bei Verwendung von Angulars HttpClient, das Observables als Rückgabewert für HTTP-Anfragen nutzt, da es mehr Flexibilität bei der Verarbeitung der Daten bietet.

Fazit

Die Entscheidung zwischen Promises und Observables hängt von den Anforderungen der Anwendung ab. Promises bieten eine einfache und schnelle Möglichkeit, einmalige asynchrone Operationen durchzuführen. Observables hingegen bieten eine umfangreiche Funktionalität und Flexibilität, sind jedoch etwas komplexer. Angular-Entwickler sollten daher je nach Anwendungsfall und Datenquelle entscheiden, welcher Ansatz am besten geeignet ist.