Ich vermute, dass Sie über die RxJS -Operatoren wie: switchMap, ExhaustMap, concatMap und mergeMap (sogenannte Operatoren höherer Ordnung) gestolpert sind. Der allgemeine Glaube, dass man eine innere Observable von einer Callback-Funktion zurückgeben muss, die an die oben genannten Operatoren übergeben wird, ist nur halb wahr oder genauer gesagt zu einem Viertel wahr. Tatsächlich muss der Rückgabetyp der Zuordnungsfunktion , die den Operatoren höherer Ordnung bereitgestellt wird, vom Typ ObservableInput sein :

Wie Sie sehen können, ist die Rückgabe eines Observable nur eine von vier Möglichkeiten . In diesem Blogbeitrag werde ich einfache Beispiele mit dem SwitchMap- Operator mit unterschiedlichen Rückgabetypen präsentieren, die dem ObservableInput entsprechen.

Abonnierbar

Die abonnierbare Schnittstelle wird von der Observable -Klasse implementiert , daher hat ihre Instanz einen kompatiblen Typ:

Im obigen Beispiel wird ein Observable von der Callback-Funktion zurückgegeben, die an den SwitchMap- Operator übergeben wird. Es ist ein sehr häufiges und weithin bekanntes Muster in Angular-Anwendungen mit Diensten, die vom HttpClient -Dienst abhängen .

Versprechen

Wenn Sie die RxJS-Bibliothek außerhalb des Angular-Ökosystems verwenden, besteht die Möglichkeit, dass Sie HTTP-Anforderungen mit Hilfe der Fetch-API oder einer Bibliothek eines Drittanbieters mit Promise-basierter API (z . B. Axios ) stellen. Es ist vollkommen gültig, ein Promise von der Mapping-Funktion zurückzugeben, ohne es explizit mit der Funktion from in ein Observable parsen zu müssen :

Array-artig

Objekte mit einer Längeneigenschaft und indizierten Elementen werden Array-artig genannt (zB die Variable arguments oder eine NodeList- Instanz). Sie können sie mit Hilfe der statischen Methode Array.from in eine reguläre Array-Instanz konvertieren . Die Operatoren höherer Ordnung sind jedoch in der Lage, direkt auf solche Objekte einzuwirken:

Wiederholbar

Es gibt mehrere integrierte Iterables in JavaScript, nämlich: Array, String, Map und Set .

Array

Ich habe mich mit dem ObservableInput-Typ vertraut gemacht , als ich auf die Rückgabe einer Reihe von Aktionen aus dem Splitter-Effekt stieß :

Wenn Sie also mehr als eine Aktion als Antwort auf die empfangene Aktion senden müssen, können Sie einfach ein Array zurückgeben, das die erforderlichen Elemente enthält , die an den Stream gesendet werden .

Schnur

Der resultierende Stream gibt die Zeichenfolgenbuchstaben als aufeinanderfolgende Werte aus:

Karte

Die Karteneinträge werden im Observable ausgegeben:

Satz

Einzigartige Elemente des Sets werden zu den Werten des resultierenden Streams:

Schlussfolgerungen

Es lohnt sich immer, einen kurzen Blick in die offizielle Dokumentation zu werfen, wenn Sie eine neue Bibliothek verwenden. Sie werden wahrscheinlich die meiste Zeit ein Observable von Callback-Funktionen der Operatoren höherer Ordnung zurückgeben, Sie sollten jedoch bedenken, dass der tatsächlich erforderliche Rückgabetyp der ObservableInput ist.

Live-Beispiel:

Ich hoffe, dir hat der Beitrag gefallen und du hast etwas Neues gelernt . Wenn ja, spendiert mir bitte einen Applaus