logo

RxJS-Observablen

In RxJS ist ein Observable eine Funktion, die verwendet wird, um einen Beobachter zu erstellen und ihn an die Quelle anzuhängen, von der Werte erwartet werden. Beispiele für Observable sind beispielsweise Klicks, Mausereignisse von einem DOM-Element oder eine HTTP-Anfrage usw.

Mit anderen Worten kann man sagen, dass der Beobachter ein Objekt mit Rückruffunktionen ist, das aufgerufen wird, wenn eine Interaktion mit dem Observable stattfindet. Die Quelle hat beispielsweise mit einem Klick auf eine Schaltfläche interagiert. HTTP Anfrage usw.

Observables können auch als Lazy-Push-Sammlungen mehrerer Werte definiert werden. Sehen wir uns ein einfaches Beispiel an, um zu verstehen, wie Observablen verwendet werden, um die Werte zu steigern.

Sehen Sie sich das folgende Beispiel an:

 import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); 

Im obigen Beispiel gibt es ein Observable, das die Werte 10, 20, 30 beim Abonnieren sofort und synchron pusht, der Wert 40 wird jedoch nach einer Sekunde nach dem Aufruf der subscribe-Methode gepusht.

Wenn Sie das Observable aufrufen und die oben genannten Werte sehen möchten, müssen Sie es abonnieren. Sehen Sie sich das folgende Beispiel an:

 import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); console.log('These are the values just before subscribe'); observable.subscribe({ next(x) { console.log('We have got value ' + x); }, error(err) { console.error('something wrong occurred: ' + err); }, complete() { console.log('Done successfully'); } }); console.log('This value is just after subscribe'); 

Ausgabe:

Wenn wir das obige Programm ausführen, erhalten wir auf der Konsole das folgende Ergebnis:

String in Ganzzahl umwandeln
RxJS-Observablen

Observablen sind Verallgemeinerungen von Funktionen

Wir wissen, dass Observables Funktionen sind, die als Klicks, Mausereignisse von einem DOM-Element oder einer HTTP-Anfrage usw. fungieren. Observables sind jedoch weder EventEmitter noch Promises für mehrere Werte. In einigen Fällen verhalten sich Observables möglicherweise wie EventEmitter, insbesondere wenn sie mithilfe von RxJS-Subjekten per Multicast übertragen werden. Normalerweise verhalten sie sich jedoch nicht wie EventEmitter.

Observablen sind wie Funktionen ohne Argumente, verallgemeinern diese jedoch, um mehrere Werte zu ermöglichen.

Java-Stack

Sehen wir uns ein Beispiel an, um dies klar zu verstehen.

Ein einfaches Beispiel für eine Funktion:

 function foo() { console.log('Hello World!'); return 123; } const x = foo.call(); // same as foo() console.log(x); const y = foo.call(); // same as foo() console.log(y); 

Ausgabe:

Sie sehen die folgende Ausgabe:

 'Hello World!' 123 'Hello World!' 123 

Schreiben wir dasselbe Beispiel, aber mit Observablen:

 import { Observable } from 'rxjs'; const foo = new Observable(subscriber => { console.log('Hello World!'); subscriber.next(123); }); foo.subscribe(x => { console.log(x); }); foo.subscribe(y => { console.log(y); }); 

Ausgabe:

Sie sehen die gleiche Ausgabe wie oben:

RxJS-Observablen

Sie können dies daran erkennen, dass sowohl Funktionen als auch Observablen verzögerte Berechnungen sind. Wenn Sie die Funktion nicht aufrufen, wird console.log('Hello World!') nicht ausgeführt. Außerdem wird bei Observables das console.log('Hello World!') nicht passieren, wenn Sie es nicht mit subscribe 'aufrufen'.

Funktionsweise eines Observablen

Es gibt drei Phasen in einem Observablen:

  • Observable erstellen
  • Observables abonnieren
  • Observablen ausführen

Observable erstellen

Es gibt zwei Möglichkeiten, Observablen zu erstellen:

alle 4 Monate
  • Verwendung der Observable-Konstruktormethode
  • Verwenden der Observable create()-Methode

Verwendung der Observable-Konstruktormethode

Erstellen wir ein Observable mit der Observable-Konstruktormethode und fügen wir mithilfe der in Observable verfügbaren Methode subscriber.next die Meldung „Dies ist mein erstes Observable“ hinzu.

testrx.js-Datei:

 import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); 

Sie können Observable auch mit der Methode Observable.create() wie folgt erstellen:

 import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); 

Observables abonnieren

Das Abonnieren eines Observablen ist wie das Aufrufen einer Funktion. Es stellt Rückrufe bereit, an die die Daten übermittelt werden.

Sie können ein Observable abonnieren, indem Sie die folgende Syntax verwenden:

Syntax:

 observable.subscribe(x => console.log(x)); 

Sehen Sie sich das obige Beispiel mit subscribe an:

testrx.js-Datei:

So konvertieren Sie char in einen String Java
 import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); observer.subscribe(x => console.log(x)); 

Ausgabe:

RxJS-Observablen

Observablen ausführen

Ein Observable wird ausgeführt, wenn es abonniert wird. Es gibt im Allgemeinen drei Methoden in einem Beobachter, die benachrichtigt werden:

nächste(): Diese Methode wird verwendet, um Werte wie eine Zahl, eine Zeichenfolge, ein Objekt usw. zu senden.

vollständig(): Diese Methode sendet keinen Wert. Es zeigt an, dass das Observable abgeschlossen ist.

Fehler(): Diese Methode wird verwendet, um den Fehler zu benachrichtigen, falls vorhanden.

Sehen wir uns ein Beispiel an, in dem wir das Observable mit allen drei Benachrichtigungen erstellt haben, und führen Sie dieses Beispiel aus:

testrx.js-Datei:

 import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { try { subscriber.next('This is my first Observable'); subscriber.next('Testing Observable'); subscriber.complete(); } catch(e){ subscriber.error(e); } } ); observer.subscribe(x => console.log(x), (e)=>console.log(e), ()=>console.log('Observable is completed now.')); 

Die Fehlermethode wird nur aufgerufen, wenn ein Fehler vorliegt. Wenn Sie den obigen Code ausführen, wird in der Konsole die folgende Ausgabe angezeigt.

Ausgabe:

RxJS-Observablen