Verstehen von Observablen in Angular

Blog

Verstehen von Observablen in Angular

Ein Observable ist wie eine Datenquelle. In einem Angular-Projekt ist es ein Objekt, das wir aus einem Drittanbieterpaket importieren. rxjs . Das Observable hier wird implementiert, indem man einem _observable pattern _ folgt, wobei wir ein . haben beobachtbar und ein Beobachter und dazwischen haben wir eine Zeitachse, in der wir mehrere Ereignisse oder Datenpakete haben können, die vom Observablen ausgegeben werden (abhängig von der Datenquelle des Observablen). Diese Ereignisse können programmgesteuert durch Benutzerinteraktion ausgelöst werden, wie eine Schaltfläche, HTTP-Anforderungen und Dutzende anderer Datenquellen.



Der Beobachter und der Umgang mit den Daten

Nein, nicht der von Randbereich . Wer oder was ist dann der Beobachter? Es ist eigentlich unser Code, unser Beobachten, sozusagen über a Abonnieren() Funktion.

Wir haben drei Möglichkeiten, diese Pakete zu handhaben. Wir können das schaffen Daten, Fehler oder die Vervollständigung des Observables , denn dies sind die drei Arten von Datenpaketen, die Sie erhalten können. In diesen drei wird Ihr Code ausgeführt.



E-Hentai-App

Was soll passieren, wenn ich ein Datenpaket erhalte? Was soll passieren, wenn ein Fehler auftritt oder das Observable abgeschlossen ist?

Einige Observables werden nie fertig, wie eine Schaltfläche, die mehrmals angeklickt werden kann, andere werden mit dem Ereignis aufgelöst (wie eine HTTP-Anfrage). Im Allgemeinen werden sie jedoch alle verwendet, um asynchrone Aufgaben zu bearbeiten. Alle diese in Ihrem Code ausgelösten Datenquellen sind asynchrone Aufgaben, Sie wissen nicht, wann sie ausgeführt werden oder wie lange sie dauern werden, und Sie möchten nicht warten, bis diese Ereignisse abgeschlossen sind, die Ihren anderen Code blockieren. Früher würden Sie Callbacks oder Promises verwenden, Observables sind nur ein anderer Ansatz, der in Angular oft der bevorzugte Weg ist. Ihr größter Vorteil sind die Betreiber, über die wir später mehr sprechen werden.



Reagieren-Eulen-Karussell

Lasst uns genauer hinschauen

Observables sind Konstrukte, die Sie abonnieren, um Datenänderungen anzuzeigen. Parameter ist ein gutes Beispiel:

ngOnInit() { this.route.params.subscribe((params: Params) => { this.userId = +params.userId }) }

Unsere params (vom Typ Params) ist ein Strom von Routenparametern, der uns einen neuen Parameter gibt, wenn wir zur nächsten Seite gehen und die userId in diesen Parametern abonnieren. Es ist ein Datenstrom, der uns neue Werte gibt. Angular verwendet Observables stark und wir müssen sie nur abonnieren, aber es ist gut zu wissen, wie sie funktionieren, also bauen wir unser eigenes Observable.

Es ist erwähnenswert, dass Observables nicht in JavaScrip oder Typescript eingebettet sind, sondern von einem Paket namens **_ rxjs._** verwaltet werden.

Parameter ist ein beobachtbares Objekt und Angular weiß es. Jedes beobachtbare Objekt kann mit der Methode Subscribe() für Änderungen abonniert werden.

Lassen Sie uns eine Observable erstellen, die jede Sekunde einen neuen Wert ausgibt und auf den Bildschirm aufmerksam macht:

gib mir amazon.com mytv
onClick() { interval(1000).subscribe(count => console.log(count)) }

fügen wir es auch an eine einfache Schaltfläche an, die unseren Listener beim Klicken auslöst und den Zähler startet:

click me

Hier ist nun das Ding. Dieses spezielle Observable wird weiterhin Werte ausgeben. Selbst wenn wir zu einer anderen Site wechseln, wird eine fortlaufende Nummer in der Konsole bis ins Unendliche ausgegeben. Andere Observables verhalten sich möglicherweise nicht unbedingt so (wie eine HTTP-Anfrage), und es ist nicht immer notwendig, dieses Verhalten zu behandeln, aber um Speicherverluste zu vermeiden, ist es eine gute Vorgehensweise, das Observable zu stoppen, wenn wir damit fertig sind. Wir tun dies, indem wir unser Observable in einer Variablen des Typs Abonnement und dann durch Stoppen über die Abmelden() Methode. Stellen Sie sich ein Abonnement vor als:

Subscription = Observable + subscribe()

#typescript #programming #javascript #javascript-tipps #angular

medium.com

Verstehen von Observablen in Angular

Angular verwendet Observables als Schnittstelle, um eine Vielzahl gängiger asynchroner Operationen zu verarbeiten. Beispiel: Sie können benutzerdefinierte Ereignisse definieren, die beobachtbare Ausgabedaten von einer untergeordneten Komponente an eine übergeordnete Komponente senden. Das HTTP-Modul verwendet Observables, um AJAX-Anfragen und -Antworten zu verarbeiten.