Observable

Konstruktor

Observable()

Erstellt eine neue Instanz eines Observable-Objekts.

Statische Methoden

from()

Gibt ein aus einem Promise, Iterable oder Async Iterable umgewandeltes Observable zurück oder gibt ein bereits vorhandenes Observable unverändert zurück.

Instanzmethoden

subscribe()

Abonniert einen Wertestrom, meist einen Strom von Ereignissen.

Instanzmethoden, die ein Observable zurückgeben

catch()

Gibt ein neues Observable zurück, das einen Fehler des Quell-Observables durch Werte eines anderen Observables ersetzt.

drop()

Gibt ein neues Observable zurück, das die angegebene Anzahl von Werten am Anfang des Quell-Observables überspringt.

filter()

Gibt ein neues Observable zurück, das nur diejenigen Werte des Quell-Observables ausgibt, für die die übergebene Callback-Funktion einen truthy-Wert zurückgibt.

finally()

Gibt ein neues Observable zurück, das das Quell-Observable widerspiegelt und einen Callback aufruft, wenn sein Abonnement endet.

flatMap()

Gibt ein neues Observable zurück, das jeden Wert des Quell-Observables einem inneren Observable zuordnet und die Werte der inneren Observables nacheinander ausgibt.

inspect()

Gibt ein neues Observable zurück, das das Quell-Observable widerspiegelt und Callbacks aufruft, um dessen Werte und den Lebenszyklus seines Abonnements zu untersuchen.

map()

Gibt ein neues Observable zurück, das die Werte des Quell-Observables ausgibt, nachdem jeder Wert durch eine Abbildungsfunktion transformiert wurde.

switchMap()

Gibt ein neues Observable zurück, das jeden Wert des Quell-Observables einem inneren Observable zuordnet und nur die Werte des jeweils neuesten inneren Observables ausgibt.

take()

Gibt ein neues Observable zurück, das die angegebene Anzahl von Werten vom Anfang des Quell-Observables ausgibt und danach abgeschlossen wird.

takeUntil()

Gibt ein neues Observable zurück, das Werte des Quell-Observables ausgibt, bis ein anderes Observable einen Wert ausgibt oder ein Fehler auftritt.

Instanzmethoden, die ein Promise zurückgeben

every()

Gibt ein Promise zurück, das mit einem booleschen Wert erfüllt wird, der angibt, ob jeder vom Quell-Observable ausgegebene Wert die übergebene Prüffunktion erfüllt.

find()

Gibt ein Promise zurück, das mit dem ersten vom Quell-Observable ausgegebenen Wert erfüllt wird, der die übergebene Prüffunktion erfüllt. Wird das Quell-Observable ohne Übereinstimmung abgeschlossen, wird es mit undefined erfüllt.

first()

Gibt ein Promise zurück, das mit dem ersten vom Quell-Observable ausgegebenen Wert erfüllt wird.

forEach()

Gibt ein Promise zurück, das mit undefined erfüllt wird, wenn das Quell-Observable abgeschlossen ist, nachdem für jeden ausgegebenen Wert ein Callback ausgeführt wurde.

last()

Gibt ein Promise zurück, das mit dem letzten vom Quell-Observable ausgegebenen Wert erfüllt wird.

reduce()

Gibt ein Promise zurück, das mit einem einzelnen Wert erfüllt wird, der durch die Kombination der Werte des Quell-Observables mithilfe einer Reducer-Funktion entsteht.

some()

Gibt ein Promise zurück, das mit einem booleschen Wert erfüllt wird, der angibt, ob mindestens ein vom Quell-Observable ausgegebener Wert die übergebene Prüffunktion erfüllt.

toArray()

Gibt ein Promise zurück, das mit einem neuen Array erfüllt wird, das die Werte des Quell-Observables in der Reihenfolge ihrer Ausgabe enthält.

Beispiele

Ein Observable von einem EventTarget erhalten

Dieses Beispiel zeigt die Mauskoordinaten in einem <p>-Element nur dann an, wenn sich der Mauszeiger über einem <div>-Element bewegt. Die Pipeline filtert die mousemove-Ereignisse des Dokumentkörpers anhand ihres Ziels und extrahiert die Koordinaten. Informationen zum Aufbau der Seite finden Sie unter Ein Observable transformieren.

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

document.body
  .when("mousemove")
  .filter((e) => e.target.matches("div"))
  .map((e) => ({ x: e.clientX, y: e.clientY }))
  .subscribe((p) => {
    outputElem.textContent = `${p.x},${p.y}`;
  });

Weitere funktionsfähige Beispiele finden Sie unter Observables verwenden.

Ein eigenes Observable erstellen

Diese Funktion erstellt ein Observable, das in einem festgelegten Intervall einen aufsteigenden Zählerstand ausgibt. Es wird im Intervall nach der Ausgabe der angeforderten Anzahl von Werten abgeschlossen. Der Teardown-Callback beendet das Intervall, wenn das Abonnement endet, auch wenn alle Observer ihr Abonnement kündigen. Ein Beispiel für einen über eine Schaltfläche gesteuerten Zähler mit diesem Producer finden Sie unter Teardown.

function makeTimer(timerInterval, iterations = Infinity) {
  return new Observable((subscriber) => {
    let i = 1;
    const interval = setInterval(() => {
      if (i === iterations + 1) {
        subscriber.complete();
      } else {
        subscriber.next(i);
      }
      i++;
    }, timerInterval);
    subscriber.addTeardown(() => {
      clearInterval(interval);
    });
  });
}

Weitere funktionsfähige Beispiele finden Sie unter Eigene Observables erstellen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Observables verwenden
• Eigene Observables erstellen
• Erläuterung zu Observable