Observable

Konstruktor

Observable()

Erstellt eine neue Instanz eines Observable-Objekts.

Statische Methoden

from()

Gibt ein Observable zurck, das aus einem Promise, einem Iterable oder einem asynchronen Iterable umgewandelt wurde, oder gibt ein bereits vorhandenes Observable unverndert zurck.

Instanzmethoden

subscribe()

Abonniert einen Wertestrom, meist einen Strom von Ereignissen.

Instanzmethoden, die ein Observable zurckgeben

catch()

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

drop()

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

filter()

Gibt ein neues Observable zurck, das nur die Werte des Quell-Observables ausgibt, fr die die bergebene Callback-Funktion einen truthy-Wert zurckgibt.

finally()

Gibt ein neues Observable zurck, das das Quell-Observable widerspiegelt und einen Callback aufruft, wenn dessen Abonnement endet.

flatMap()

Gibt ein neues Observable zurck, das jeden Wert des Quell-Observables auf ein inneres Observable abbildet und die Werte der inneren Observables nacheinander ausgibt.

inspect()

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

map()

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

switchMap()

Gibt ein neues Observable zurck, 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 zurck, das die angegebene Anzahl von Werten vom Anfang des Quell-Observables ausgibt und anschlieend abgeschlossen wird.

takeUntil()

Gibt ein neues Observable zurck, das Werte des Quell-Observables ausgibt, bis ein anderes Observable einen Wert ausgibt oder ein Fehler bei diesem auftritt.

Instanzmethoden, die ein Promise zurckgeben

every()

Gibt ein Promise zurck, das mit einem booleschen Wert erfllt wird, der angibt, ob jeder vom Quell-Observable ausgegebene Wert die bergebene Prffunktion erfllt.

find()

Gibt ein Promise zurck, das mit dem ersten vom Quell-Observable ausgegebenen Wert erfllt wird, der die bergebene Prffunktion erfllt, oder mit undefined, falls das Quell-Observable ohne Treffer abgeschlossen wird.

first()

Gibt ein Promise zurck, das mit dem ersten vom Quell-Observable ausgegebenen Wert erfllt wird.

forEach()

Gibt ein Promise zurck, das mit undefined erfllt wird, wenn das Quell-Observable abgeschlossen ist, nachdem fr jeden ausgegebenen Wert ein Callback ausgefhrt wurde.

last()

Gibt ein Promise zurck, das mit dem letzten vom Quell-Observable ausgegebenen Wert erfllt wird.

reduce()

Gibt ein Promise zurck, das mit einem einzelnen Wert erfllt wird, der durch Kombination der Werte des Quell-Observables mithilfe einer Reducer-Funktion entsteht.

some()

Gibt ein Promise zurck, das mit einem booleschen Wert erfllt wird, der angibt, ob mindestens ein vom Quell-Observable ausgegebener Wert die bergebene Prffunktion erfllt.

toArray()

Gibt ein Promise zurck, das mit einem neuen Array erfllt wird, das die Werte des Quell-Observables in der Reihenfolge ihrer Ausgabe enthlt.

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 funktionsfhige Beispiele finden Sie unter Observables verwenden.

Ein eigenes Observable erstellen

Diese Funktion erstellt ein Observable, das in einem festgelegten Intervall einen aufsteigenden Zhlerstand 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 Schaltflche gesteuerten Zhler, 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 funktionsfhige Beispiele finden Sie unter Eigene Observables erstellen.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Observables verwenden
• Eigene Observables erstellen
• Erluterung zu Observables