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 durch 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 die Werte dieses inneren Observables 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 ist 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: Ein 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 gestellt. Wenn dieses innere Observable nie abgeschlossen wird, bleiben spätere Werte des Quell-Observables in der Warteschlange und die zugehörigen Aufrufe von mapper werden nicht ausgeführt. Wenn stattdessen das aktuelle innere Observable beim Eintreffen eines neuen Werts des Quell-Observables abbestellt werden soll, verwenden Sie switchMap().

Wenn mapper eine Ausnahme auslöst oder sich sein Rückgabewert nicht in ein Observable umwandeln lässt, meldet das zurückgegebene Observable einen Fehler. Fehler des Quell-Observables oder eines inneren Observables werden ebenfalls weitergegeben. In jedem dieser Fälle beendet das zurückgegebene Observable das Abonnement des Quell-Observables und jedes aktiven inneren Observables.

Beispiele

flatMap() verwenden

Dieses Beispiel zeigt die Mauskoordinaten an, während die Maus von einem <div>-Element aus gezogen wird. Jeder Mausklick startet einen inneren Stream von Mausbewegungen, der mit dem Loslassen der Maustaste endet. flatMap() gibt 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 Observable