Dieser Artikel wurde von Florian Rapppl und Moritz Kr?ger überprüft. Vielen Dank an alle Peer -Rezensenten bei SitePoint für die perfekte Erstellung von SitePoint -Inhalten!

Als Interesse an funktionaler reaktiver Programmierung (FRP) w?chst RXJS zu einer der beliebtesten JavaScript -Bibliotheken in diesem Paradigma. In diesem Artikel werden wir die zehn wichtigsten Funktionen in RXJs untersuchen.

Hinweis: In diesem Artikel geht davon aus, dass Sie mit den Grundlagen von RXJs vertraut sind, wie im Artikel "Beginnend mit funktionaler reaktivem Programmieren mit RXJs" beschrieben.

Schlüsselpunkte

• rxjs nutzt beobachtbare Objekte, die den im Laufe der Zeit gefüllten Arrays ?hneln, um die funktionelle reaktive Programmierung (FRP) zu erleichtern, wodurch deklarativere und leistungsstarke Fehlerbehandlungen in Anwendungen erm?glicht werden.
• Die Kernvorg?nge einfacher Streams in RXJs, wie map(), filter(), reduce() und take(), Spiegelarray -Operationen, werden jedoch auf Streams von Zahlen angewendet, die Werte im Laufe der Zeit emittieren.
• spezielle Funktionen wie flatMap() und switch() sind entscheidend für die Behandlung komplexer Datenstrukturen und die separate Verwaltung mehrerer Streams, wodurch sie für fortschrittliche reaktive Programmieraufgaben von entscheidender Bedeutung sind.
• Operatoren wie concat(), merge() und combineLatest() k?nnen verwendet werden, um mehrere Streams effektiv zu kombinieren, von denen jede eine andere Rolle bei der Stream -Management und der Datensynchronisation spielt.
Die Funktion
• takeUntil() bietet einen Mechanismus, der auf externen Bedingungen basiert, die sich abmelden, was die Flexibilit?t von RXJs in der Flussregelung und des Ressourcenmanagements veranschaulicht.

reaktive Programmierung

reaktive Programmierung ist ein Programmierparadigma, das den Datenstrom nennt, der als Basis -Programmiereinheit bezeichnet wird.

Stream - oder beobachtbare Objekte in Rxjs Jargon - Allike Event H?rer: Beide warten darauf, dass etwas passiert, und benachrichtigen Sie, wenn es passiert. Eine Reihe asynchroner Benachrichtigungen, die vom Onclick -H?rer erhalten wurden, sind ein perfektes Beispiel für den Datenfluss.

Mit anderen Worten, das beobachtbare Objekt ist nichts anderes als ein Array, das im Laufe der Zeit gefüllt ist.

Elemente dieses Arrays k?nnen von fast überall stammen: Dateisystem, DOM -Ereignisse, API -Aufrufe und sogar synchrone Daten wie Arrays. Grunds?tzlich ist die reaktive Programmierung nichts anderes, als beobachtbare Objekte als Bausteine ??von Programmen zu verwenden.

Beziehung zu Array

Arrays sind einfach, da ihr Inhalt endgültig ist, es sei denn, es wird explizit ge?ndert. In diesem Sinne gibt es in einem Array keine wesentliche Zeitlichkeit.

Andererseits werden beobachtbare Objekte nach der Zeit definiert. H?chstens wissen Sie, dass der Stream bisher erhalten hat [1, 2, 3]. Sie k?nnen nicht sicher sein, ob Sie 4 oder nicht - und es ist die Datenquelle, nicht Ihr Programm, das dies bestimmt.

Die Beziehung zwischen Streams und Arrays ist so tiefgreifend, dass die meisten reaktiven Erweiterungen aus der Welt der funktionalen Programmierung stammen, in der Listenvorg?nge Kern sind.

mit Rxjs

vertraut

Betrachten Sie gemeinsame Aufgaben-Apps. Lassen Sie uns die Frage sehen, wie der Name der unvollendeten Aufgabe eines Benutzers mit RXJS angezeigt wird:

const task_stream =
  // 創(chuàng)建所有數(shù)據(jù)庫中任務(wù)的流
  getTasks().
    // 只獲取此用戶的任務(wù)
    filter((task) => task.user_id == user_id).
    // 獲取未完成的任務(wù)
    filter((task) => !task.completed).
    // 只獲取任務(wù)名稱
    map((task) => task.name)

/* 任務(wù)如下所示：
   task = {
    user_id   : number,
    completed : boolean,
    name      : string
   }
 */

bisher ist dies nur eine Array -Erweiterung, zeigt jedoch den funktionellen Stil der reaktiven Programmierung.

Die deklarative Natur wird deutlich, indem komplexere "reale Welt" -Funktionen hinzugefügt werden. Angenommen, wir wollen:

• Initiieren Sie die Anfrage als Antwort auf die Auswahl des Benutzers, um ausgefüllte oder unvollendete Aufgaben anzuzeigen
Senden Sie nur eine zweite Anfrage an die letzte Auswahl, um eine Bandbreite zu vermeiden, wenn der Benutzer die Auswahl schnell ?ndert
• bis zu drei fehlgeschlagene Anfragen wiederholen;
Veranlassung der Ansicht nur, wenn der Server eine andere Antwort sendet als beim letzten Mal.
schrittweise zersetzen:

const task_stream =
  parameter_stream.
    debounce(1000).
    map((parameter) => {
      getTasks().
        retry(3).
        filter((task) => task.user_id === user_id).
        filter((task) => task.completed === parameter).
        map((task)    => task.name)
    }).
    flatMap(Rx.Observable.from).
    distinctUntilChanged().
    update()

parameter_stream sagt uns, ob der Benutzer abgeschlossene oder unvollendete Aufgaben will, und speichert die Auswahl im Parameter

dunounce () stellen Sie sicher, dass wir uns nur auf die letzte Schaltfl?che pro Sekunde konzentrieren

Der Teil um Gettasks () ist der gleiche wie zuvor;
• differenzuntilchanged () stellt sicher, dass wir nur die Antwort des Servers anders folgen als beim letzten Mal
update () ist für die Aktualisierung der Benutzeroberfl?che verantwortlich, um das zu reflektieren, was wir vom Server erhalten.
• Umgang mit Entladung, Wiederholung und "unterschiedlicher bis ver?nderter" Logik in imperativen, auf Callback-basierten Stilen ist effektiv, aber sowohl fragil als auch komplex.
• Der Schlüssel ist, dass die Programmierung mit RXJS:
erlaubt
Deklarationsprogramm;

skalierbares System;

Einfache, direkte und leistungsstarke Fehlerbehandlung.

Beim Durchsuchen der Top Ten Must-Know-Funktionen von RXJs werden wir auf jeden der Funktionen in den obigen Beispielen begegnen.

1. Einfacher Durchflussbetrieb
2. Die grundlegenden Funktionen eines einfachen Streams (ein Stream, der einfache Werte ausgibt, z. B. eine Zeichenfolge) umfassen:
map ()

filter ()

record ()

take () / take thing ()

• Abgesehen von Take () und TakeInt () ?hneln diese den Array-Funktionen h?herer Ordnung von JavaScript.
• Wir werden diese Funktionen anwenden, indem wir ein Beispielproblem l?sen: Suchen Sie alle Benutzer in der Datenbank mit .com- oder .org -Websites und berechnen Sie die durchschnittliche L?nge ihrer Website -Namen.
• JSONPLAPHOPHREDER wird als unsere Nutzerquelle dienen. Dies ist eine JSON -Darstellung der Benutzerdaten, die wir verwenden werden.
• 1.
Die Verwendung von MAP () auf beobachtbaren Objekten ist mit der Verwendung in einem Array die gleiche. Es:

Rückruf als Parameter;

Führen Sie es auf jedem Element des Arrays aus, das Sie aufrufen

Gibt ein Neues Array zurück, in dem jedes Element des ursprünglichen Arrays durch das Ergebnis ersetzt wird, das durch den Rückruf darauf erzeugt wird.

Der einzige Unterschied bei der Verwendung von MAP () an beobachtbaren Objekten ist:

Es gibt ein neues beobachtbares Objekt zurück, kein Neues;

Es wird ausgeführt, wenn das beobachtbare Objekt ein neues Projekt ausgeht, und nicht sofort.
2. Wir k?nnen mit MAP () unsere Benutzerdatenstr?me in eine Liste umwandeln, die nur ihre Website -Namen enth?lt:

const task_stream =
  // 創(chuàng)建所有數(shù)據(jù)庫中任務(wù)的流
  getTasks().
    // 只獲取此用戶的任務(wù)
    filter((task) => task.user_id == user_id).
    // 獲取未完成的任務(wù)
    filter((task) => !task.completed).
    // 只獲取任務(wù)名稱
    map((task) => task.name)

/* 任務(wù)如下所示：
   task = {
    user_id   : number,
    completed : boolean,
    name      : string
   }
 */

Hier verwenden wir MAP, um jedes Benutzerobjekt im eingehenden Stream durch die Website jedes Benutzers zu ersetzen.

Mit

rxjs k?nnen Sie auch map () als select () aufrufen. Beide Namen beziehen sich auf dieselbe Funktion.

2

Like map (), Filter () spielt ungef?hr die gleiche Rolle bei beobachtbaren Objekten wie bei Arrays. Um jeden Benutzer mit einer .NET- oder .org -Website -Adresse zu finden, k?nnen wir Folgendes schreiben:

const task_stream =
  parameter_stream.
    debounce(1000).
    map((parameter) => {
      getTasks().
        retry(3).
        filter((task) => task.user_id === user_id).
        filter((task) => task.completed === parameter).
        map((task)    => task.name)
    }).
    flatMap(Rx.Observable.from).
    distinctUntilChanged().
    update()

Dies wird nur Benutzer ausgew?hlt, deren Website in "net" oder "org" endet.
filter () hat auch einen Alias ??where ().
3.

recly () erm?glicht es uns, alle einzelnen Werte zu verwenden und sie in ein einzelnes Ergebnis umzuwandeln.

record () ist h?ufig der verwirrendste grundlegende Listenbetrieb, da das Verhalten im Gegensatz zu Filter () oder MAP () je nach Verwendung variiert.

Normalerweise nimmt Reduzierung () eine Sammlung von Werten auf und konvertiert sie in einen einzelnen Datenpunkt. In unserem Beispiel geben wir ihm einen Website -Namens -Stream an und verwenden reduziert (), um diesen Stream in ein Objekt umzuwandeln, das die Summe der Anzahl der gefundenen Websites und deren Namensl?nge berechnet.

hier vereinfachen wir den Stream zu einem einzelnen Objekt, das verfolgt:

source.
  map((user) => user.website)

Wie viele Websites haben wir gesehen;
Gesamtl?nge aller Namen.
2. Denken Sie daran, dass record () das Ergebnis nur dann zurückgibt, wenn das beobachtbare Quellobjekt abgeschlossen ist. Wenn Sie den Status des Akkumulators jedes Mal wissen m?chten, wenn der Stream ein neues Element empf?ngt, verwenden Sie stattdessen Scan ().
4.

take () und take the Take () erg?nzen die grundlegenden Funktionen einfacher Streams.

Nehmen Sie (n) Nehmen Sie N -Werte aus dem Stream und abmelden Sie ab.

Wir k?nnen jedes Mal, wenn wir die Website erhalten, scan () zum Aussenden unseres Objekts und nur die ersten beiden Werte verwenden.

rxjs bietet auch TakeIth (), sodass Sie Werte erhalten k?nnen, bevor ein bestimmter boolescher Test festgelegt wird. Wir k?nnen Take the Take () verwenden, um den obigen Stream wie folgt zu schreiben:

source.
  map((user) => user.website).
  filter((website) => (website.endsWith('net') || website.endsWith('org'));
})

Flie?betrieb mit hoher Ordnung
Diese Funktionen sind nahezu gleich wie bekannte Listenvorg?nge, au?er dass sie eher an beobachtbaren Objekten als an Arrays arbeiten.

source.
  map((user) => user.website).
  filter((website) => (website.endsWith('net') || website.endsWith('org'))).
  reduce((data, website) => {
    return {
      count       : data.count += 1,
      name_length : data.name_length += website.length
    }
  }, { count : 0, name_length : 0 })

"[i] f Sie wissen, wie man mit den Array#Extras gegen Arrays programmiert, dann wissen Sie bereits, wie man RXJS verwendet!"
So wie ein Array Daten enthalten kann, die komplexer sind als einfache Werte (z. B. ein Array oder Objekt), k?nnen beobachtbare Objekte auch Daten h?herer Ordnung wie Versprechen oder andere beobachtbare Objekte aussagen. Hier kommen mehr professionelle Tools ins Spiel.

5.

… in der Tat verwenden wir es bereits!

Wenn wir den Quellstrom definieren, rufen wir Promise () und flatMap ():

auf
Dies verwendet drei neue Mechanismen:

from Promise;

rx.observable.from;

source.
  map((user) => user.website).
  filter((website) => (website.endsWith('net') || website.endsWith('org'))).
  scan((data, website) => {
      return {
        count       : data.count += 1,
        name_length : data.name_length += website.length
      }
    }, { count : 0, name_length : 0 }).
  take(2);

Flatmap.
beobachtbares Objekt aus Versprechen
Versprechen stellt einen einzelnen zukünftigen Wert dar, den wir asynchron erhalten - zum Beispiel das Ergebnis eines Aufrufs auf den Server.
2. Ein definierendes Merkmal von

   Versprechen ist, dass es nur einen zukünftigen Wert darstellt. Es kann nicht mehrere asynchrone Daten zurückgeben.

   Dies bedeutet, dass wir, wenn wir rx.observable.frompromise () verwenden, ein beobachtbares Objekt erhalten, das einen einzelnen Wert ausgibt - oder:

   1. der Wert an Versprechen;
   Versprechen abgelehnter Wert.
   Wenn Promise eine Zeichenfolge oder eine Nummer zurückgibt, müssen wir nichts Besonderes tun. Wenn es jedoch ein Array zurückgibt (wie es in unserem Fall ist), bevorzugen wir es, ein beobachtbares Objekt zu erstellen, das den Inhalt des Arrays eher als einzelnes Wert als einzelner Wert ausgibt.
   6

   Dieser Prozess wird als Abflachung bezeichnet, die flatMap () verarbeitet. Es hat viele überlastungen, aber wir verwenden nur die einfachsten und am h?ufigsten verwendeten überlastungen.

   Bei Verwendung von FlatMap ():

   rufen Sie FlatMap () auf beobachtbare Objekte auf, die eine Einzelwertaufl?sung oder Ablehnung des Versprechens ausstellen;
   eine Funktion übergeben, um ein neues beobachtbares Objekt zu erstellen.
   2. In unserem Beispiel passieren wir rx.observable.from (), das eine Sequenz aus den Werten des Arrays erstellt:

   Dies deckt den Code in unserem kurzen Vorwort ab:

   const task_stream =
     // 創(chuàng)建所有數(shù)據(jù)庫中任務(wù)的流
     getTasks().
       // 只獲取此用戶的任務(wù)
       filter((task) => task.user_id == user_id).
       // 獲取未完成的任務(wù)
       filter((task) => !task.completed).
       // 只獲取任務(wù)名稱
       map((task) => task.name)
   
   /* 任務(wù)如下所示：
      task = {
       user_id   : number,
       completed : boolean,
       name      : string
      }
    */

   rxjs bietet auch einen Alias ??für flatMap (): selectMany ().

   const task_stream =
     parameter_stream.
       debounce(1000).
       map((parameter) => {
         getTasks().
           retry(3).
           filter((task) => task.user_id === user_id).
           filter((task) => task.completed === parameter).
           map((task)    => task.name)
       }).
       flatMap(Rx.Observable.from).
       distinctUntilChanged().
       update()

   kombiniert mehrere Streams
   Normalerweise haben wir mehrere Streams, die kombiniert werden müssen. Es gibt viele M?glichkeiten, Streams zu kombinieren, aber einige erscheinen h?ufiger als andere.
   7.

   Verbindung und Zusammenführung sind die beiden h?ufigsten M?glichkeiten, Str?me zu kombinieren.

   Verbindung erstellt einen neuen Stream, indem der Wert des ersten Streams abgibt, bis er fertig ist, und dann den Wert des zweiten Streams auszugeben.

   Merge erstellt neue Streams aus mehreren Streams, indem der Wert eines aktiven Streams

   emittiert wird

   Denken Sie darüber nach, mit zwei Personen gleichzeitig auf Facebook Messenger zu sprechen. concat () ist eine Situation, in der Sie eine Nachricht von beiden Parteien erhalten, aber ein Gespr?ch mit einer Person abschlie?en, bevor Sie auf eine andere Person antworten. Merge () ist wie das Erstellen eines Gruppenchates und das Empfangen von zwei Nachrichtenstr?men gleichzeitig.

   Der Stream

   concat () druckt zun?chst alle Werte von Source1 aus und druckt nur den Wert von Source2, nachdem Source1 beendet ist.
   merge () Der Stream druckt die Werte von Source1 und Source2 gem?? der empfangenen Reihenfolge: Er wartet nicht, bis der erste Stream abgeschlossen ist, bevor der Wert des zweiten Streams abgibt.

   source.
     map((user) => user.website)

   8

   Normalerweise m?chten wir auf beobachtbare Objekte zuh?ren, die beobachtbare Objekte abgeben, sich jedoch nur auf die neuesten Emissionen der Quelle konzentrieren.
   Um die Analogie von Facebook Messenger weiter zu erweitern, switch () sind Sie ... nun, die Person, die Sie antworten, basierend darauf, wer derzeit die Nachricht sendet.
   Zu diesem Zweck bietet RXJS Switch.
   Die Benutzeroberfl?che bietet mehrere gute Anwendungsf?lle für Switch (). Wenn unsere Anwendung jedes Mal eine Anfrage stellt, wenn der Benutzer w?hlt, wonach er suchen m?chte, k?nnen wir davon ausgehen, dass er nur die Ergebnisse der neuesten Auswahl sehen m?chte. Daher verwenden wir Switch (), um nur für die neuesten Auswahlergebnisse zuzuh?ren.

   übrigens sollten wir sicherstellen, dass wir keine Bandbreite verschwenden und nur zum letzten Mal Zugriff auf den Server ausw?hlen, wenn ein Benutzer jede Sekunde herstellt. Die Funktion, die wir dafür verwenden, hei?t DEBOINCE ()

   Wenn Sie in die andere Richtung gehen und nur der ersten Wahl folgen m?chten, k?nnen Sie Drosselklappen () verwenden. Es hat die gleiche API, verh?lt sich aber das Gegenteil.

   9

   Was ist, wenn wir Benutzern erlauben m?chten, nach Posts oder Benutzern mit einer bestimmten ID zu suchen?
   Zur Demonstration erstellen wir ein weiteres Dropdown-Menü und erm?glichen den Benutzern die Auswahl der ID des Elements, das sie abrufen m?chten.
   Es gibt zwei Situationen. Wenn Benutzer:
   jede Wahl ?ndern;
   1. zwei Optionen ?ndern.
   reagieren
   Im ersten Fall müssen wir einen Stream erstellen, der eine Netzwerkanforderung unter Verwendung der folgenden startet:

   Die aktuelle Auswahl des Benutzers von Endpunkt;

   Die kürzlich vom Benutzer ausgew?hlte ID.
   … und tun Sie dies, wenn der Benutzer eine Auswahl aktualisiert.
   Das ist es, was kombinelatest () ist für:
   Wenn ein Stream einen Wert ausgibt, nimmt CombinEnelatest () den emittierten Wert und kombiniert ihn mit dem letzten von den anderen Streams emittierten Elementen und stellt das Paar als Array aus.
   Dies ist im Diagramm einfacher zu visualisieren:

   const task_stream =
     // 創(chuàng)建所有數(shù)據(jù)庫中任務(wù)的流
     getTasks().
       // 只獲取此用戶的任務(wù)
       filter((task) => task.user_id == user_id).
       // 獲取未完成的任務(wù)
       filter((task) => !task.completed).
       // 只獲取任務(wù)名稱
       map((task) => task.name)
   
   /* 任務(wù)如下所示：
      task = {
       user_id   : number,
       completed : boolean,
       name      : string
      }
    */

   verwenden Sie ZIP, um nur auf ?nderungen in zwei Streams zu reagieren
   Warten Sie also, bis der Benutzer seine Auswahl von ID- und Endpoint -Feldern aktualisiert, und ersetzen Sie Combinelatest () durch ZIP ().

   const task_stream =
     parameter_stream.
       debounce(1000).
       map((parameter) => {
         getTasks().
           retry(3).
           filter((task) => task.user_id === user_id).
           filter((task) => task.completed === parameter).
           map((task)    => task.name)
       }).
       flatMap(Rx.Observable.from).
       distinctUntilChanged().
       update()

   Dies ist im Diagramm noch einfacher zu verstehen:

   im Gegensatz zu CombinElatest () wird ZIP () warten, bis beide beobachtbaren Objekte neue Inhalte ausgeben, bevor ein Array ihrer aktualisierten Werte gesendet wird.
   10

   source.
     map((user) => user.website)

   Schlie?lich erm?glicht TakeUntil (), auf den ersten Stream zuzuh?ren, bis der zweite Stream Werte abgibt.

   Dies ist nützlich, wenn Sie Streams koordinieren müssen, diese jedoch nicht kombinieren müssen.

   Zusammenfassung

   source.
     map((user) => user.website).
     filter((website) => (website.endsWith('net') || website.endsWith('org'));
   })

   Nur Zeitabmessungen zu Arrays ?ffnen die Tür für neue Denken über Programme.
   rxjs ist viel mehr als das, was wir hier sehen, aber das reicht aus, um einen langen Weg zu gehen.
   Beginnen Sie mit RXJS Lite, lassen Sie sich auf die Dokumentation verweisen und nehmen Sie sich Zeit dafür. Bevor Sie es wissen, sieht alles wie ein Stream aus ... weil alles ist.
   FAQs über RXJS -Funktionen (FAQ)
   Was ist der Hauptunterschied zwischen RXJS und traditionellem JavaScript?
   rxjs ist eine reaktive Programmierbibliothek, die beobachtbare Objekte verwendet, um die Kombination aus asynchronem oder Rückrufback-Code zu vereinfachen. Dies wird mit der Verwendung traditioneller JavaScript mit einem imperativeren Programmierstil verglichen. Der Hauptunterschied besteht darin, wie sie Daten verarbeiten - Rxjs behandelt Daten als Stream, das mit verschiedenen Operatoren betrieben und transformiert werden kann, w?hrend herk?mmliche JavaScript -Daten linearer verarbeitet.

   Wie erstellt man beobachtbare Objekte in RXJs?

   In RXJs k?nnen Sie mit dem neuen Observable () -Konstruktor beobachtbare Objekte erstellen. Dieser Konstruktor nimmt eine Funktion als Argument an, die als Abonnentenfunktion bezeichnet wird und bei der ursprünglich ein beobachtbares Objekt abonniert wird. Hier ist ein grundlegendes Beispiel:

   const task_stream =
     // 創(chuàng)建所有數(shù)據(jù)庫中任務(wù)的流
     getTasks().
       // 只獲取此用戶的任務(wù)
       filter((task) => task.user_id == user_id).
       // 獲取未完成的任務(wù)
       filter((task) => !task.completed).
       // 只獲取任務(wù)名稱
       map((task) => task.name)
   
   /* 任務(wù)如下所示：
      task = {
       user_id   : number,
       completed : boolean,
       name      : string
      }
    */

   Was sind die Hauptbetreiber in RXJs und wie funktioniert sie?

   rxjs verfügt über eine breite Palette von Operatoren, mit denen die Daten zwischen beobachtbaren Objekten und Beobachtern flie?en lassen k?nnen. Einige der Hauptbetreiber umfassen MAP (), filter (), record (), merge () und concat (). Jeder dieser Bediener betreibt auf unterschiedliche Weise einen Datenstrom, z. B. Datenkonvertieren, Filtern bestimmter Werte oder das Kombinieren mehrerer Streams.

   Wie kann man Fehler in RXJs umgehen?

   rxjs liefert mehrere Operatoren, die Fehler wie CatchError (), Wiederholung () und Wiederholung () umgehen. Der Operator CatchError () wird verwendet, um Fehler in beobachtbaren Streams zu fangen und ein neues beobachtbares Objekt zurückzugeben oder einen Fehler zu werfen. Der Retyp () -Preiber kann verwendet werden, um im Falle eines Fehlers beobachtbare Objekte erneut zu bezeichnen. Der Wiederholungstreiber () ist ?hnlich, bietet jedoch mehr Kontrolle darüber, wann sie wiederholt werden müssen.

   Wie storniere ich das Abonnement von beobachtbaren Objekten in RXJs?

   Wenn Sie ein beobachtbares Abonnement abonnieren, erhalten Sie ein Abonnement, das eine Methode für Abzahlen () enth?lt. Sie k?nnen diese Methode aufrufen, um die Ausführung des beobachtbaren Objekts zu stornieren und alle verwendeten Ressourcen zu bereinigen. Hier ist ein Beispiel:

   const task_stream =
     parameter_stream.
       debounce(1000).
       map((parameter) => {
         getTasks().
           retry(3).
           filter((task) => task.user_id === user_id).
           filter((task) => task.completed === parameter).
           map((task)    => task.name)
       }).
       flatMap(Rx.Observable.from).
       distinctUntilChanged().
       update()

   Was ist der Unterschied zwischen einem mittelschweren beobachtbaren Objekt und einem kalten beobachtbaren Objekt?

   In RXJs kann das beobachtbare Objekt hei? oder kalt sein. Kaltobestierungen werden beim Abonnieren ausgeführt, w?hrend hei?e Observablen Werte bereits vor dem Abonnieren produzieren. Mit anderen Worten, kalte beobachtbare Objekte sind inert, w?hrend hei?e beobachtbare Objekte dies nicht tun.

   Wie kombiniert man mehrere beobachtbare Objekte in RXJs?

   rxjs liefert mehrere Operatoren, die mehrere beobachtbare Objekte kombinieren, wie z. B. merge (), concat (), combinelatest () und ZIP (). Jeder dieser Bediener kombiniert Datenstr?me auf unterschiedliche Weise, abh?ngig von Ihren spezifischen Anforderungen.

   Was ist der Zweck des Themas in RXJs?

   Das Thema in RXJS ist eine spezielle Art von beobachtbarem Objekt, mit dem mehrere Beobachter Multicasting von Werten erm?glicht werden k?nnen. Im Gegensatz zu gew?hnlichen beobachtbaren Objekten halten Themen für viele Zuh?rer Register.

   Wie kann man RXJs mit Angular verwenden?

   Angular unterstützt RXJS integriert und verwendet ihn intern für verschiedene Funktionen. Sie k?nnen RXJS auch in Ihrem eigenen Code verwenden, um asynchrone Vorg?nge zu verarbeiten und Funktionen wie automatische Abschluss, De-Jitter, Drosselung, Umfragen usw. zu implementieren.

   Was sind einige übliche Anwendungsf?lle für RXJs?

   rxjs k?nnen in verschiedenen Szenarien verwendet werden, in denen asynchrone Daten erforderlich sind. Einige übliche Anwendungsf?lle umfassen die Bearbeitung von Benutzereingaben, die Erstellung von HTTP -Anforderungen, die Verwendung von Websockets und die Bearbeitung von Animationen.

   Das obige ist der detaillierte Inhalt von10 Notwendigkeit, RXJS-Funktionen mit Beispielen zu wissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!