Subscriber

Instanzeigenschaften

active

Ein boolescher Wert, der angibt, ob das Abonnement aktiv ist.

signal

Ein intern erzeugtes AbortSignal, das abgebrochen wird, wenn das Abonnement abgeschlossen wird, ein Fehler auftritt oder sich alle Beobachter abmelden.

Instanzmethoden

addTeardown()

Registriert einen Callback, der Ressourcen bereinigt, wenn das Abonnement abgeschlossen wird, ein Fehler auftritt oder sich alle Beobachter abmelden.

complete()

Beendet das Abonnement und benachrichtigt die Beobachter darber, dass der Datenstrom erfolgreich abgeschlossen wurde.

error()

Beendet das Abonnement und benachrichtigt die Beobachter ber einen Fehler.

next()

Sendet einen Wert an die Beobachter des Abonnements.

Beschreibung

Ein Subscriber-Objekt wird an den Callback bergeben, der dem Observable()-Konstruktor bereitgestellt wurde, sobald sich der erste Beobachter anmeldet. Weitere Beobachter teilen sich diesen Subscriber, solange er aktiv ist. Nachdem das Abonnement abgeschlossen wurde, ein Fehler aufgetreten ist oder sich alle Beobachter abgemeldet haben, ruft die nchste Anmeldung den Callback mit einem neuen Subscriber auf. Sie knnen einen Subscriber nicht direkt konstruieren.

Der Produzent ruft Subscriber.next(), Subscriber.error() und Subscriber.complete() auf, um Werte und Benachrichtigungen an Beobachter zu senden. Die Beobachter legen ber die entsprechenden Callbacks, die an Observable.subscribe() bergeben werden, fest, wie diese Benachrichtigungen behandelt werden. Der Produzent kann auerdem mit Subscriber.addTeardown() Callbacks zur Bereinigung registrieren.

Beispiele

Weitere Beispiele finden Sie unter Benutzerdefinierte Observables erstellen.

Einfaches Beispiel fr Observable()

In diesem Beispiel geben wir die Zahlen von 1 bis 10 auf der Seite aus. Wenn der Produzent das Abonnement abschliet, beendet der Bereinigungs-Callback das Intervall. Anschlieend zeigt der complete-Callback des Beobachters eine Abschlussmeldung an.

HTML

Das Markup enthlt ein einzelnes <p>-Element zur Anzeige des Zhlstands und einen <button>, um den Zhler zu starten.

<button>Start count</button>
<p></p>

JavaScript

Im JavaScript holen wir zunchst Referenzen auf die Elemente <p> und <button>. Anschlieend registrieren wir einen Event-Listener fr <button>, damit der Zhler beim Klicken startet:

const outputElem = document.querySelector("p");
const btn = document.querySelector("button");

btn.addEventListener("click", () => {
  btn.disabled = true;
  const observable = new Observable((subscriber) => {
    let i = 1;
    const interval = setInterval(() => {
      if (i === 11) {
        subscriber.complete();
      } else {
        subscriber.next(i);
      }
      i++;
    }, 500);
    subscriber.addTeardown(() => {
      if (btn.textContent === "Start count") {
        btn.textContent = "Restart count";
      }
      clearInterval(interval);
      btn.disabled = false;
    });
  });

  observable.subscribe({
    next(value) {
      outputElem.textContent = value;
    },
    complete() {
      outputElem.textContent = "Count complete";
    },
  });
});

Innerhalb der Handler-Funktion fr das click-Ereignis:

• Wir deaktivieren die Schaltflche, damit ein weiterer Klick keinen berlappenden Zhler starten kann. Dann erstellen wir mit dem Observable()-Konstruktor ein neues Observable. In dessen Callback-Funktion deklarieren wir eine Variable i mit dem Wert 1. Anschlieend prfen wir mit einem Aufruf von Window.setInterval() alle 500 Millisekunden den Wert von i. Hat der Wert 11 erreicht, rufen wir die Methode complete() auf, um das Abonnement abzuschlieen. Andernfalls rufen wir next() auf, um den aktuellen Zhlstand an den Beobachter zu senden.
• Am Ende jedes Intervalldurchlaufs wird i um 1 erhht.
• Auerdem registrieren wir mit addTeardown() einen Bereinigungs-Callback. Darin ndern wir den Text auf der Schaltflche zu Zhler neu starten, sofern er nicht bereits so lautet das ist passender, wenn der Zhler schon einmal gelaufen ist. Vor allem aber beenden wir das Intervall mit Window.clearInterval(), wenn das Abonnement endet, und aktivieren die Schaltflche fr den nchsten Zhldurchlauf wieder.
• Schlielich melden wir uns durch einen Aufruf von Observable.subscribe() beim Observable an. Im Argument der Methode subscribe() definieren wir die Beobachter-Callbacks, die von den Subscriber-Methoden im vorherigen Block aufgerufen werden: Der next()-Callback gibt den an ihn bergebenen Wert (im obigen aufrufenden Code i) im <p>-Element aus, und der complete()-Callback gibt dort Zhlen abgeschlossen aus.

Ergebnis

Das Beispiel wird wie folgt dargestellt:

Klicken Sie auf die Schaltflche. Alle 500 Millisekunden wird der aktuelle Zhlstand auf der Seite ausgegeben. Nachdem 10 angezeigt wurde, schliet der nchste Intervall-Callback das Abonnement ab und zeigt Zhlen abgeschlossen an.

Der Bereinigungs-Callback ndert den Text der Schaltflche zu Zhler neu starten und aktiviert sie wieder, bevor der complete()-Callback des Beobachters ausgefhrt wird.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Benutzerdefinierte Observables erstellen
• Erluterung zu Observable