Observable API

Konzepte und Verwendung

Ereignisse und reaktive Programmierung

Ereignisse sind grundlegend fr die Webentwicklung und die JavaScript-Programmierung im Allgemeinen. Sie gehen von EventTarget-Objekten aus:

element.addEventListener("click", handler1);
element.addEventListener("click", handler2);

Wenn der Benutzer auf das element klickt, sendet das vom Browser verwaltete Element eine Benachrichtigung an jeden seiner Event-Listener in diesem Fall handler1 und handler2. Die Benachrichtigung ist ein Event-Objekt, das weitere Informationen und Daten zu dem Ereignis bereitstellt. Der jeweilige Handler fhrt daraufhin eine Aktion aus.

Dieses Paradigma wird als reaktive Programmierung bezeichnet: Aktionen werden als Reaktion auf einen Auslser ausgefhrt. Abstrakt betrachtet gibt es vier grundlegende Arten reaktiver Programmierung:

• Einmaliges Abrufen (Single pull): Der Initiator empfngt einen einzelnen Wert. Normale Funktionen setzen dies um: Bei const result = action(); ist der Aufrufer der Funktion action() der Initiator, der einen einzelnen Wert result aus der Funktion abruft.
• Einmaliges Senden (Single push): Der Initiator sendet einen einzelnen Wert, und der Empfnger wartet, bis er diesen Wert erhlt. Promises setzen dies um: Bei promise.then((value) => { ... }); ist die Promise-Implementierung der Initiator. Wenn das Promise erfllt wird, ruft sie die Callback-Funktion genau einmal auf und bergibt dabei einen einzelnen Wert.
• Mehrmaliges Abrufen (Multiple pulls): Der Initiator pausiert die Ausfhrung der Datenquelle und setzt sie fort, um nach und nach mehrere Werte zu empfangen. Iteratoren setzen dies um: Bei const result1 = iterator.next(); const result2 = iterator.next(); ist der Aufrufer der Methode next() der Initiator, der mehrere Werte aus dem Iterator abruft.
• Mehrmaliges Senden (Multiple pushes): Der Initiator sendet mehrere Werte, und die Ausfhrung des Empfngers pausiert zwischen dem Empfang dieser Werte. Ereignisse setzen dies um: Bei element.addEventListener("click", handler); ist das Element der Initiator. Es ruft die Funktion handler mehrfach auf, wenn der Benutzer auf das Element klickt, und bergibt dabei mehrere Ereignisobjekte.

Ereignisstrme verknpfen

Das Problem beim Modell mit addEventListener() besteht darin, dass sich Event-Handler nicht einfach miteinander verknpfen lassen. Jeder Handler wird fr sich ausgefhrt und hat nicht automatisch Kenntnis von den anderen Ereignissen einer Abfolge. Wenn Sie beispielsweise gezielt auf ein mousemove-Ereignis reagieren mchten, das nach einem mousedown-Ereignis eintritt, mssen Sie den gemeinsamen Zustand selbst verwalten. Das fhrt zu komplexem und fehleranflligem Code.

Die Observable API lst dieses Problem, indem sie Ereignisstrme mit Methoden wie Observable.map() und Observable.filter() deklarativ erstellt und verarbeitet. Sie ersetzt das ereignisgesteuerte Modell nicht grundstzlich, sondern verndert die Art, wie Sie Ihren Code organisieren hnlich wie Promises gegenber herkmmlichen Callbacks die Art verndert haben, wie asynchroner Code geschrieben wird.

Observables beziehen

In der Observable API stellt ein Observable einen Wertestrom dar, und ein Observer empfngt Benachrichtigungen darber mittels Callbacks. Der Code, der Werte sendet, wird als Produzent bezeichnet; der Code, der diese Werte nutzt, als Konsument. Den Konsumentencode schreiben Sie in der Regel mithilfe von Methoden der Schnittstelle Observable, um Werte aus Observables umzuwandeln und zu verarbeiten. Wenn Sie selbst ein Observable implementieren, schreiben Sie den Produzentencode mithilfe der Schnittstelle Subscriber, um Werte an die Observer zu senden. Es gibt drei wesentliche Mglichkeiten, Observables zu beziehen:

• Die Methode EventTarget.when() gibt ein Observable zurck, das einen Strom von Ereignissen darstellt, die auf dem EventTarget ausgelst werden. Auch Bibliotheken knnen Observables zurckgeben.
• Mit dem Konstruktor Observable() knnen Sie eigene Observables erstellen.
• Mit der statischen Methode Observable.from() knnen Sie Objekte wie Promises und Iterables in Observables umwandeln.

Werte umwandeln, abonnieren und Abonnements beenden

Ein Observable lsst sich mit verschiedenen Methoden umwandeln, die neue Observables zurckgeben, beispielsweise Observable.map() und Observable.filter().

Um Werte von einem Observable zu empfangen, abonnieren Sie es mit der Methode Observable.subscribe(). Alternativ knnen Sie alle Werte mit Methoden, die ein Promise zurckgeben, wie Observable.reduce(), zusammenfassen. Observables werden verzgert ausgewertet: Sie beginnen erst dann, Werte zu erzeugen, wenn sie mindestens einen Abonnenten haben.

Sie knnen das Abonnement eines Observables auch mit einem AbortController oder bestimmten Methoden wie Observable.takeUntil() beenden.

Betrachten wir ein kurzes Beispiel:

document.body
  .when("mousedown")
  .filter((e) => e.target.matches("body"))
  .map((e) => ({ x: e.clientX, y: e.clientY }))
  .subscribe((p) => {
    console.log(`${p.x},${p.y}`);
  });

In diesem Codeausschnitt ist das <body>-Element der Seite ein EventTarget. Mit der Methode when() erhalten wir einen Strom von mousedown-Ereignissen, die auf diesem Element ausgelst werden.

Anschlieend definieren wir eine Verarbeitungskette:

• Observable.filter() lsst nur Ereignisse durch die Verarbeitungskette, die auf dem <body>-Element selbst ausgelst wurden geprft mit der Methode Element.matches() und nicht auf dessen Nachfahren.
• Observable.map() wandelt die ausgelsten mousedown-Ereignisobjekte in neue Objekte um, die die Koordinaten des Mauszeigers zum Zeitpunkt des Ereignisses enthalten.
• Observable.subscribe() abonniert das Observable. Der Callback gibt die Mauskoordinaten jedes Mal auf der Konsole aus, wenn ein mousedown-Ereignis den Filter passiert.

Mglicherweise fllt Ihnen auf, dass dieses Paradigma Iteratoren sehr hnlich ist. Auch bei ihnen knnen wir Werte mit map() und filter() umwandeln und mit next() und toArray() verarbeiten. Sowohl Observables als auch Iteratoren stellen Datenstrme dar. Der entscheidende Unterschied ist, wie bereits erwhnt, dass Iteratoren nach dem Pull-Prinzip funktionieren (der Konsument entscheidet, wann er Werte empfngt), whrend Observables nach dem Push-Prinzip funktionieren (der Produzent entscheidet, wann er Werte sendet).

Weitere Informationen zu diesen Konzepten finden Sie unter Observables verwenden und Eigene Observables erstellen.

Schnittstellen

Observable

Stellt einen Wertestrom dar, der abonniert werden kann.

Subscriber

Stellt ein Abonnement eines Observable-Wertestroms dar und enthlt Methoden zur Verwaltung des Lebenszyklus dieses Abonnements.

Erweiterungen anderer Schnittstellen

EventTarget.when()

Gibt ein Observable zurck, das einen Strom von Ereignissen darstellt, die auf dem EventTarget ausgelst werden.

Beispiele

Vollstndige Beispiele finden Sie unter Observables verwenden und Eigene Observables erstellen.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Erluterung zu Observables