Observables mit RxJs

RxJs ist eine Bibliothek, die nützliche Funktionen für die Handhabung von Obversables bereit stellt. Sie erlaubt "reactive programming". Das ist ein Programmierparadigma, welches fokussiert auf asynchrone Funktionen und damit Daten-Streams und Änderungsevents. Sie kann in allen JavaScript-Umgebungen genutzt werden (und es gibt die Bibliothek auch für andere Programmiersprachen) und ist standardmäßig Teil von Angular.

Was sind Observables?

Observables sind Objekte, die (asynchron oder synchron) Werte produzieren. Das können z.B. Nutzereingaben in ein Inputfeld, Werte aus externen Datenquellen/Sensoren oder Scheduler sein. Ein Observable kann "abonniert" werden durch einen Subscriber. Dieser kann dann auf neue Werte reagieren.

import { Observable } from 'rxjs/Observable';

// Ein simples Observable, das synchron drei Werte ausgibt
const myObservable = Observable.of(1, 2, 3); 

// Ein Subscriber hinzufügen
const mySubscription = myObservable.subscribe({
  next(response) => console.log("Got new value:", response),
  error(err) => console.error("Something wrong:", error),
  complete() => console.log("No more values can be expected.")
})

Eigenschaften von Observables:

• Lazy: Werden erst ausgeführt, wenn ein Subscriber die Werte "aboniert" und noch nicht bei der Definition

• Stream: Können über die Zeit mehrere Werte ausgeben, nicht nur einen.

• Cancel subscriptions: Subscriptions laufen ewig weiter, deshalb müssen sie gecancelt werden mit

• Async/Sync: Je nach producer function (also der Funktion, die ein Observable produziert) kann es synchron laufen (wie im Beispiel oben) oder asynchron (wie typischerweise bei Nutzereingaben).

Observables werden oft mit Promises verglichen, denn beide erlauben die Handhabung asynchroner Operationen. Promises werden mit den async/await Keywords genutzt.

const promise = new Promise((resolve, reject) => {
  // Async operation logic here....
  if (asyncOperationSuccess) {
    resolve(value); // async operation successful
  } else {
    reject(error);  // async operation error
  }
});

Eigenschaften von Promises:

• Eager: Werden sofort ausgeführt bei der Definition

• Single value: Geben nur einen Wert zurück (und müssen deshalb auch nicht gecancelt werden)

• Async: Promises sind immer asynchron, selbst wenn die Operation dahinter synchron ausgeführt wird.

RxJs Operatoren und Funktionen

RxJs bietet Funktionen, um besser mit Observables umzugehen. Zum Beispiel merge zum Zusammenführen von verschiedenen Observables (subscribe to multiple buttons' clicks and always do the same if any of them is clicked), konvertieren von Promises, ...

• RxJS Guide von Angular: https://angular.io/guide/rx-library

• RxJS-Doku zu seinen Operatoren: https://rxjs.dev/guide/operators

Abmelden: Cancelling subscriptions

Subscriptions laufen weiter, auch z.B. wenn die (Angular-)Komponente abgeräumt wurde. Deswegen müssen die subscriptions gecancelt werden, um memory leaks zu vermeiden. Dafür gibt es verschiedene Möglichkeiten.

mySubscriptions.unsubscribe();

// oder beim subscriben schon die Abbruchbedingung definieren
myObservable
  .takeUntil(someOtherObservableThatFiresWhenTheComponentGetsDestroyed)
  .subscribe(mySubscriptionObject);

Artikel zum Thema

• https://medium.com/@sanjayofficial94/promise-vs-observable-7c1af6fefd12

• https://medium.com/javascript-everyday/javascript-theory-promise-vs-observable-d3087bc1239a