Observable: flatMap()-Methode

Syntax

flatMap(mapper)

Parameter

mapper

Eine Funktion, die für jeden vom Quell-Observable ausgegebenen Wert ausgeführt wird. Sie muss einen Wert zurückgeben, der von Observable.from() in ein Observable umgewandelt werden 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.

Rückgabewert

Ein neues Observable. Wenn es abonniert wird, ruft es mapper für jeden Wert des Quell-Observables auf, wandelt den Rückgabewert in ein Observable um und gibt dessen Werte aus. Es wartet, bis das aktuelle innere Observable abgeschlossen ist, bevor es mapper für den nächsten Wert des Quell-Observables aufruft. Das zurückgegebene Observable wird abgeschlossen, nachdem das Quell-Observable und alle inneren Observables abgeschlossen sind.

Beschreibung

Wie andere Operatoren, die ein Observable zurückgeben, arbeitet diese Methode verzögert: Der Aufruf erstellt ein neues Observable, ohne das Quell-Observable zu abonnieren. Die Verarbeitung beginnt, wenn das zurückgegebene Observable abonniert wird.

Werte des Quell-Observables, die eintreffen, während ein inneres Observable aktiv ist, werden in eine Warteschlange eingereiht. Wenn dieses innere Observable nie abgeschlossen wird, bleiben spätere Werte in der Warteschlange und die zugehörigen Aufrufe von mapper werden nicht ausgeführt. Wenn Sie das aktuelle innere Observable abbestellen möchten, sobald ein neuer Wert des Quell-Observables eintrifft, verwenden Sie stattdessen switchMap().

Wenn mapper eine Ausnahme auslöst oder sein Rückgabewert nicht in ein Observable umgewandelt werden kann, meldet das zurückgegebene Observable einen Fehler. Fehler des Quell-Observables oder eines inneren Observables werden ebenfalls weitergeleitet. In jedem dieser Fälle meldet das zurückgegebene Observable das Quell-Observable und jedes aktive innere Observable ab.

Beispiele

flatMap() verwenden

Dieses Beispiel zeigt Mauskoordinaten an, während die Maus von einem <div>-Element aus gezogen wird. Jeder Mausklick startet einen inneren Stream von Mausbewegungen, der endet, wenn die Maustaste losgelassen wird. flatMap() leitet diese Bewegungen weiter und wartet, bis der aktuelle innere Stream abgeschlossen ist, bevor ein weiterer Mausklick verarbeitet wird.

<div>Press here and drag.</div>
<p>Waiting for a drag</p>

div {
  height: 120px;
  background-color: lavender;
  user-select: none;
}

const target = document.querySelector("div");
const output = document.querySelector("p");

target
  .when("mousedown")
  .flatMap(() => document.when("mousemove").takeUntil(document.when("mouseup")))
  .subscribe((event) => {
    output.textContent = `${event.clientX},${event.clientY}`;
  });

Ein ausführlicheres Beispiel finden Sie unter Zeichnen auf einem Canvas.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Observables verwenden
• Erläuterung zu Observables