Observable

Konstruktor

Observable()

Erstellt eine neue Instanz eines Observable-Objekts.

Statische Methoden

from()

Gibt ein Observable zurück, das aus einem Promise, einem Iterable oder einem asynchronen Iterable umgewandelt wurde, 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 die 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 dessen Abonnement endet.

flatMap()

Gibt ein neues Observable zurück, das jeden Wert des Quell-Observables auf ein inneres Observable abbildet 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 auf ein inneres Observable abbildet und nur 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 anschließend 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 bei diesem 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, oder mit undefined, falls das Quell-Observable ohne Treffer abgeschlossen wird.

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 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 nur dann in einem <p>-Element an, wenn sich der Mauszeiger über einem <div>-Element bewegt. Die Pipeline filtert die mousemove-Ereignisse des Body-Elements nach ihrem Ziel 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 dann, wenn sich alle Beobachter abmelden. Einen mit einer Schaltfläche gesteuerten Zähler, der diesen Producer verwendet, 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 Observables