Observable: Methode switchMap()

Syntax

switchMap(mapper)

Parameter

mapper

Eine Funktion, die fr jeden vom Quell-Observable ausgegebenen Wert ausgefhrt wird. Sie muss einen Wert zurckgeben, den Observable.from() in ein Observable umwandeln kann: ein Observable, ein Promise, ein iterierbares Objekt oder ein asynchron iterierbares Objekt. Die Funktion wird mit den folgenden Argumenten aufgerufen:

value

Der aktuell verarbeitete Wert.

index

Der Index des aktuell verarbeiteten Werts, beginnend bei 0.

Rckgabewert

Ein neues Observable. Wenn es abonniert wird, ruft es mapper fr jeden Wert des Quell-Observables auf, wandelt den Rckgabewert in ein Observable um und gibt die Werte dieses inneren Observables aus. Bevor es mapper fr einen neuen Wert des Quell-Observables aufruft, beendet es das Abonnement des aktuellen inneren Observables. Das zurckgegebene Observable wird abgeschlossen, nachdem das Quell-Observable und das letzte innere Observable abgeschlossen wurden.

Beschreibung

Wie andere Operatoren, die ein Observable zurckgeben, arbeitet diese Methode verzgert: Der Aufruf erstellt ein neues Observable, ohne das Quell-Observable zu abonnieren. Die Verarbeitung beginnt, wenn das zurckgegebene Observable abonniert wird.

Nur Werte des neuesten inneren Observables werden weitergegeben. Um alle Werte des Quell-Observables nacheinander zu verarbeiten und jeweils auf den Abschluss des inneren Observables zu warten, verwenden Sie stattdessen flatMap().

Wenn mapper eine Ausnahme auslst oder sein Rckgabewert nicht in ein Observable umgewandelt werden kann, meldet das zurckgegebene Observable einen Fehler. Fehler des Quell-Observables oder des aktiven inneren Observables werden ebenfalls weitergegeben. In jedem dieser Flle beendet das zurckgegebene Observable die Abonnements des Quell-Observables und eines gegebenenfalls aktiven inneren Observables.

Das Beenden des Abonnements eines inneren Observables bricht die zugrunde liegende Arbeit nicht unbedingt ab. Wenn der Mapper beispielsweise ein Promise von fetch() zurckgibt, bricht der Wechsel zu einem neuen inneren Observable die Anfrage nicht ab. Unter Asynchrone Arbeit abbrechen finden Sie ein benutzerdefiniertes Observable, das einen Abbruch untersttzt.

Beispiele

Einen Stream umschalten

In diesem Beispiel startet oder stoppt jeder Klick auf die Schaltflche einen Zhler. Das benutzerdefinierte Observable gibt alle 500 Millisekunden einen Wert aus und registriert einen Callback zum Aufrumen, der das Intervall beendet, wenn sein Abonnement endet.

<button>Start count</button>
<p>Count not started</p>

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

const counter = new Observable((subscriber) => {
  let n = 1;
  const interval = setInterval(() => subscriber.next(n++), 500);
  subscriber.addTeardown(() => clearInterval(interval));
});

btn
  .when("click")
  .switchMap((event, index) => {
    const start = index % 2 === 0;
    btn.textContent = start ? "Stop count" : "Start count";
    return start ? counter : [];
  })
  .subscribe((value) => {
    output.textContent = value;
  });

Der Wechsel zu einem leeren Array beendet das Abonnement des Zhlers und lscht dessen Intervall. Das Abonnement fr Klicks auf die Schaltflche bleibt aktiv, sodass der nchste Klick einen neuen Zhlvorgang bei 1 startet.

Vorausschauende Suche

In diesem Beispiel werden Suchvorschlge abgerufen, whrend die Person eine Suchanfrage in ein Suchfeld eingibt. Es setzt voraus, dass /search-items ein JSON-Array mit Ergebnissen zurckgibt und updateLookahead() diese Ergebnisse anzeigt.

const textbox = document.querySelector('input[type="search"]');

textbox
  .when("input")
  .map(() => textbox.value.trim())
  .filter((query) => query.length > 3)
  .switchMap((query) =>
    fetch(`/search-items?q=${encodeURIComponent(query)}`)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`Search failed: ${response.status}`);
        }
        return response.json();
      })
      .catch((error) => {
        console.error(error);
        return [];
      }),
  )
  .subscribe(updateLookahead);

Jede Suchanfrage mit mehr als drei Zeichen startet eine Anfrage. switchMap() wandelt das zurckgegebene Promise in ein Observable um und beendet das Abonnement des vorherigen inneren Observables. Wenn eine frhere Anfrage erst abgeschlossen wird, nachdem eine neuere Suchanfrage mit mehr als drei Zeichen eingegeben wurde, werden ihre Ergebnisse ignoriert. Das Beenden des Abonnements bricht die zugrunde liegende fetch()-Anfrage selbst nicht ab.

Der catch()-Handler des Promises gibt bei einem Fehler ein leeres Ergebnis-Array zurck. Dadurch bleibt das uere Abonnement aktiv und wartet auch nach einer fehlgeschlagenen Suche weiter auf Eingaben.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Observables verwenden
• Erluterung zu Observable