⚡ Wie man nie wieder dieselben RxJs-Fehler wiederholt⚡

Denken Sie daran: .pipe () ist nicht .subscribe ()!

Dieser Artikel richtet sich an Anfänger, die versuchen, ihr RxJ-Wissen zu erweitern, kann aber auch eine schnelle Aktualisierung oder eine Referenz sein, die Anfängern für erfahrene Entwickler gezeigt werden kann!

Heute werden wir es kurz und direkt auf den Punkt bringen!

Derzeit arbeite ich in einer ziemlich großen Organisation mit einigen Teams und Projekten (mehr als 40 SPAs), die gerade auf Angular und damit auch auf RxJs migriert werden.

Dies ist eine großartige Gelegenheit, um mit den verwirrenden Teilen von RxJs in Kontakt zu treten, die leicht vergessen werden können, wenn man die APIs beherrscht und sich stattdessen auf die Implementierung der Funktionen konzentriert.

Die Funktion ".subscribe ()"

Die beobachtbaren RxJs repräsentieren ein „Rezept“ dessen, was passieren soll. Es ist deklarativ, was bedeutet, dass alle Operationen und Transformationen von Anfang an vollständig angegeben werden.

Ein Beispiel für einen beobachtbaren Strom könnte ungefähr so ​​aussehen ...

Dieser beobachtbare RxJ-Stream wird buchstäblich nichts für sich tun. Um es auszuführen, müssen wir es irgendwo in unserer Codebasis abonnieren!

Im obigen Beispiel haben wir einen Handler nur für die vom Observable ausgegebenen Werte bereitgestellt. Die Subscribe-Funktion selbst akzeptiert bis zu drei verschiedene Argumente für den nächsten Wert, Fehler oder das vollständige Ereignis.

Außerdem könnten wir auch ein Objekt mit den oben aufgeführten Eigenschaften übergeben. Ein solches Objekt ist eine Implementierung der ObserverSchnittstelle. Der Vorteil von Observer ist, dass wir keine Implementierung oder zumindest keinen nullPlatzhalter für die Handler bereitstellen müssen, an denen wir nicht interessiert sind.

Betrachten Sie das folgende Beispiel…

Im obigen Code übergeben wir ein Objektliteral, das nur einen vollständigen Handler enthält. Die normalen Werte werden ignoriert und Fehler sprudeln in den Stapel.

In diesem Beispiel übergeben wir den Handler des nächsten Fehlers und vervollständigen ihn als direkte Argumente der Subscribe-Funktion. Alle nicht implementierten Handler müssen als null oder undefiniert übergeben werden, bis wir zu dem Argument gelangen, an dem wir interessiert sind.

Wie wir sehen können, ist der Inline-Argumentationsstil der Implementierung eines .subscribe()Funktionsaufrufs positionell.

Nach meiner Erfahrung ist der Inline-Argumentationsstil derjenige, der in verschiedenen Projekten und Organisationen am häufigsten vorkommt.

Leider können wir oft auf eine Implementierung wie die folgende stoßen ...

Das obige Beispiel enthält redundante Handler für beide nextund errorHandler, die genau nichts tun und durch ersetzt werden könnten null.

Noch besser wäre es, das Beobachterobjekt mit der completeHandler-Implementierung zu übergeben und andere Handler ganz wegzulassen!

Die ".pipe ()" und die Operatoren

Da Anfänger es gewohnt sind, drei Argumente für das Abonnieren anzugeben, versuchen sie häufig, ein ähnliches Muster zu implementieren, wenn sie ähnliche Operatoren in der Rohrkette verwenden.

RxJs Operatoren, die oft mit den Handlern verwechselt werden .subscribe(), sind catchErrorund finalize. Beide dienen ebenfalls einem ähnlichen Zweck - der einzige Unterschied besteht darin, dass sie im Kontext der Pipe anstelle des Abonnements verwendet werden.

Falls wir auf das vollständige Ereignis jedes Abonnements des beobachtbaren Streams von RxJ reagieren möchten, können wir den finalizeOperator als Teil des beobachtbaren Streams selbst implementieren .

Auf diese Weise müssen wir uns nicht auf die Entwickler verlassen, um vollständige Handler in jedem einzelnen .subscribe () -Aufruf zu implementieren. Denken Sie daran, dass der beobachtbare Stream mehrmals abonniert werden kann!

Dies bringt uns zu dem endgültigen und wohl problematischsten Muster, das bei der Untersuchung verschiedener Codebasen auftreten kann: Redundante Operatoren wurden hinzugefügt, wenn versucht wird, dem Muster .subscribe () im Kontext .pipe () zu folgen.

Vielleicht begegnen wir auch seinem noch wortreicheren Cousin…

Beachten Sie, dass wir von der ursprünglichen einzelnen Zeile zu den vollständigen neun Codezeilen übergegangen sind, die wir lesen und verstehen müssen, wenn wir einen Fehler beheben oder eine neue Funktion hinzufügen möchten.

Dinge können in Kombination mit komplexeren generischen Typoskripttypen noch komplexer werden, wodurch der gesamte Codeblock noch mysteriöser wird (und somit mehr Zeit verschwendet wird).

Reprise

  1. Die .subscribe()Methode akzeptiert sowohl das Beobachterobjekt als auch Inline-Handler.
  2. Das Beobachterobjekt ist die vielseitigste und prägnanteste Möglichkeit, einen beobachtbaren Stream zu abonnieren.
  3. Im Fall , dass wir mit den Inline - subscribe Argumente gehen ( next, error, complete) können wir bieten nullanstelle eines Handler wir nicht brauchen.
  4. Wir sollten sicherstellen, dass wir nicht versuchen, das .subscribe()Muster im Umgang mit .pipe()und Operatoren zu wiederholen .
  5. Bemühen Sie sich immer, den Code so einfach wie möglich zu halten und unnötige Redundanzen zu beseitigen!

Das ist es! ✨

Ich hoffe, Ihnen hat dieser Artikel gefallen und Sie haben jetzt ein besseres Verständnis dafür, wie Sie RxJs Observables mit einer sauberen und präzisen Implementierung abonnieren können!

Bitte unterstützen Sie diesen Leitfaden mit Ihrem ??? Verwenden Sie den Klatschknopf und helfen Sie ihm, sich einem breiteren Publikum zu verbreiten? Zögern Sie auch nicht, mich anzurufen, wenn Sie Fragen zu den Artikelantworten oder zu Twitter DMs @tomastrajan haben.

Und nie vergessen, die Zukunft ist hell Starten Sie ein Angular-Projekt? Schauen Sie sich Angular NgRx Material Starter an!

Wenn Sie es bis hierher geschafft haben, können Sie einige meiner anderen Artikel über Angular- und Frontend-Softwareentwicklung im Allgemeinen lesen.

? ‍? ️ Die 7 Pro-Tipps, um mit Angular CLI & Schematics produktiv zu werden?

Ein g ular Schema ist ein Workflow - Tool für die modernen Web - offizielle Einführung articlehac kernoon.com   des besten Weg zu Abmelden RxJS Observable in den Winkeln Anwendungen!

Es gibt viele verschiedene Möglichkeiten, wie Sie mit RxJS-Abonnements in Angular-Anwendungen umgehen können, und wir werden deren… blog.angularindepth.com - Gesamthandbuch für Angular 6+ - Abhängigkeitsinjektion - bereitgestellt im Vergleich zu Anbietern: []?

L et uns lernen , wann und wie nutzen , um neue besseren Winkel 6+ Dependency Injection - Mechanismus mit neuer providedIn Syntax zu machen ... m edium.com Die ultimative Antwort auf die Sehr häufig Angular Frage: subscribe () vs | asynchrones Rohr

Die meisten der beliebten Angular State Management-Bibliotheken wie NgRx stellen den Anwendungsstatus in Form eines Streams von… blog.angularindepth.com bereit