Observable: Methode subscribe()

Syntax

subscribe()
subscribe(observer)
subscribe(observer, options)

Parameter

observer Optional

Ein Objekt, das eine oder mehrere der folgenden Callback-Funktionen enthält:

next Optional

Eine Funktion, die mit jedem vom Observable ausgegebenen Wert aufgerufen wird.

error Optional

Eine Funktion, die mit dem Fehler aufgerufen wird, wenn im Observable ein Fehler auftritt. Fehlt sie, wird der Fehler an das globale Objekt gemeldet.

complete Optional

Eine Funktion, die ohne Argumente aufgerufen wird, wenn das Observable abgeschlossen ist. Beim Abbestellen wird dieser Callback nicht aufgerufen.

Alternativ kann observer eine Funktion sein. Dies entspricht der Übergabe eines Objekts mit dieser Funktion als next-Callback. Die Rückgabewerte aller Callbacks werden ignoriert.

options Optional

Ein Optionsobjekt mit der folgenden Eigenschaft:

signal Optional

Ein AbortSignal, mit dem dieser Observer abbestellt werden kann. Wurde das Signal bereits abgebrochen, erhält der Observer keine Benachrichtigungen. Siehe Ein Observable abbestellen.

Rückgabewert

Keiner (undefined).

Beschreibung

Ein Aufruf von subscribe() startet sofort ein Abonnement. Werte können synchron übermittelt werden, noch bevor subscribe() zurückkehrt. Mehrere Observer teilen sich den aktiven Subscriber des Observables. Wird ein Observer abbestellt, bleiben die anderen abonniert.

Die Callbacks des Observers erhalten Benachrichtigungen vom Produzenten. Sie definieren oder ersetzen nicht die Subscriber-Methoden des Produzenten. Ein Fehler oder ein Abschluss beendet das Abonnement, sodass der Observer danach keine weiteren Werte erhält.

Löst ein Observer-Callback eine Ausnahme aus, wird diese an das globale Objekt gemeldet, ohne das Abonnement zu beenden oder den error-Callback des Observers aufzurufen. Auf zurückgegebene Promises wird nicht gewartet, und ihre Ablehnungen werden von subscribe() nicht behandelt.

Beispiele

Werte und Abschluss empfangen

Dieses Beispiel zeigt die Koordinaten der ersten drei Klicks auf eine Schaltfläche und anschließend eine Abschlussmeldung an. Der next-Callback des Observers verarbeitet jeden Wert, und sein complete-Callback verarbeitet das Ende des Datenstroms. Klicken Sie auf „Restart“, um es nach dem Abschluss erneut zu versuchen.

<button>Click me</button>
<p>Waiting for clicks</p>
<button id="restart" disabled>Restart</button>

const btn = document.querySelector("button");
const output = document.querySelector("p");
const restart = document.querySelector("#restart");

function start() {
  restart.disabled = true;
  output.textContent = "Waiting for clicks";
  btn
    .when("click")
    .take(3)
    .subscribe({
      next(event) {
        output.textContent = `${event.clientX},${event.clientY}`;
      },
      complete() {
        restart.disabled = false;
        output.textContent += " — Complete.";
      },
    });
}

restart.when("click").subscribe(start);
start();

Abbestellen

Dieses Beispiel zeigt Mauskoordinaten an, bis auf die Schaltfläche „Stop“ geklickt wird. Das Abbrechen entfernt den Observer, ohne einen Abschluss-Callback aufzurufen. Klicken Sie auf „Restart“, um ihn erneut zu abonnieren.

<button>Stop</button>
<p>Move the mouse</p>
<button id="restart" disabled>Restart</button>

const btn = document.querySelector("button");
const output = document.querySelector("p");
const restart = document.querySelector("#restart");

function start() {
  restart.disabled = true;
  output.textContent = "Move the mouse";
  const controller = new AbortController();

  document.body.when("mousemove").subscribe(
    (event) => {
      output.textContent = `${event.clientX},${event.clientY}`;
    },
    { signal: controller.signal },
  );

  btn
    .when("click")
    .take(1)
    .subscribe(() => {
      controller.abort();
      output.textContent += " — Stopped";
      restart.disabled = false;
    });
}

restart.when("click").subscribe(start);
start();

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Observables verwenden
• Erläuterung zu Observable