RxJS - Arbeiten mit Themen
Ein Thema ist ein Observable, das Multicasting ausführen kann, dh mit vielen Beobachtern sprechen kann. Stellen Sie sich eine Schaltfläche mit einem Ereignis-Listener vor. Die mit dem Ereignis-Listener an das Ereignis angehängte Funktion wird jedes Mal aufgerufen, wenn der Benutzer auf die Schaltfläche klickt.
Wir werden die folgenden Themen in diesem Kapitel diskutieren -
- Erstellen Sie ein Thema
- Was ist der Unterschied zwischen beobachtbar und Subjekt?
- Verhalten Betreff
- Betreff wiedergeben
- AsyncSubject
Erstellen Sie ein Thema
Um mit dem Betreff zu arbeiten, müssen wir den Betreff wie unten gezeigt importieren -
import { Subject } from 'rxjs';
Sie können ein Betreffobjekt wie folgt erstellen:
const subject_test = new Subject();
Das Objekt ist ein Beobachter, der drei Methoden hat -
- next(v)
- error(e)
- complete()
Abonnieren Sie einen Betreff
Sie können mehrere Abonnements zu diesem Thema erstellen, wie unten gezeigt -
subject_test.subscribe({
next: (v) => console.log(`From Subject : ${v}`)
});
subject_test.subscribe({
next: (v) => console.log(`From Subject: ${v}`)
});
Das Abonnement wird für das betreffende Objekt genau wie der zuvor beschriebene Addlistener registriert.
Übergabe von Daten an den Betreff
Sie können Daten an den Betreff übergeben, der mit der next () -Methode erstellt wurde.
subject_test.next("A");
Die Daten werden an alle Abonnements weitergegeben, die zu diesem Thema hinzugefügt wurden.
Beispiel
Hier ist ein Arbeitsbeispiel für das Thema -
import { Subject } from 'rxjs';
const subject_test = new Subject();
subject_test.subscribe({
next: (v) => console.log(`From Subject : ${v}`)
});
subject_test.subscribe({
next: (v) => console.log(`From Subject: ${v}`)
});
subject_test.next("A");
subject_test.next("B");
Das subject_test-Objekt wird durch Aufrufen eines neuen Subject () erstellt. Das Objekt subject_test verweist auf die Methoden next (), error () und complete (). Die Ausgabe des obigen Beispiels ist unten dargestellt -
Ausgabe
![](https://post.nghiatu.com/assets/tutorial/rxjs/images/passing_data.jpg)
Wir können die Methode complete () verwenden, um die Ausführung des Betreffs wie unten gezeigt zu stoppen.
Beispiel
import { Subject } from 'rxjs';
const subject_test = new Subject();
subject_test.subscribe({
next: (v) => console.log(`From Subject : ${v}`)
});
subject_test.subscribe({
next: (v) => console.log(`From Subject: ${v}`)
});
subject_test.next("A");
subject_test.complete();
subject_test.next("B");
Sobald wir complete aufrufen, wird die nächste später aufgerufene Methode nicht aufgerufen.
Ausgabe
![](https://post.nghiatu.com/assets/tutorial/rxjs/images/passing_data_method.jpg)
Lassen Sie uns nun sehen, wie die error () -Methode aufgerufen wird.
Beispiel
Unten ist ein Arbeitsbeispiel -
import { Subject } from 'rxjs';
const subject_test = new Subject();
subject_test.subscribe({
error: (e) => console.log(`From Subject : ${e}`)
});
subject_test.subscribe({
error: (e) => console.log(`From Subject : ${e}`)
});
subject_test.error(new Error("There is an error"));
Ausgabe
![](https://post.nghiatu.com/assets/tutorial/rxjs/images/passing_data_error.jpg)
Was ist der Unterschied zwischen beobachtbar und Subjekt?
Ein Observable spricht eins zu eins mit dem Teilnehmer. Jedes Mal, wenn Sie das Observable abonnieren, beginnt die Ausführung von vorne. Nehmen Sie einen HTTP-Anruf mit Ajax entgegen und 2 Teilnehmer rufen das Observable an. Auf der Registerkarte des Browsernetzwerks werden 2 HttpHttp-Anforderungen angezeigt.
Beispiel
Hier ist ein funktionierendes Beispiel dafür -
import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';
let final_val = ajax('https://jsonplaceholder.typicode.com/users').pipe(map(e => e.response));
let subscriber1 = final_val.subscribe(a => console.log(a));
let subscriber2 = final_val.subscribe(a => console.log(a));
Ausgabe
![](https://post.nghiatu.com/assets/tutorial/rxjs/images/observable.jpg)
![](https://post.nghiatu.com/assets/tutorial/rxjs/images/observable_ex.jpg)
Hier besteht das Problem darin, dass dieselben Daten gemeinsam genutzt werden sollen, jedoch nicht auf Kosten von 2 HTTP-Aufrufen. Wir möchten einen HTTP-Anruf tätigen und die Daten zwischen den Teilnehmern teilen.
Dies wird mit Betreff möglich sein. Es ist ein Observable, das Multicasting ausführen kann, dh mit vielen Beobachtern sprechen kann. Es kann den Wert zwischen Abonnenten teilen.
Beispiel
Hier ist ein Arbeitsbeispiel mit Subjects -
import { Subject } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';
const subject_test = new Subject();
subject_test.subscribe({
next: (v) => console.log(v)
});
subject_test.subscribe({
next: (v) => console.log(v)
});
let final_val = ajax('https://jsonplaceholder.typicode.com/users').pipe(map(e => e.response));
let subscriber = final_val.subscribe(subject_test);
Ausgabe
![](https://post.nghiatu.com/assets/tutorial/rxjs/images/observable_possible.jpg)
Jetzt können Sie nur einen HTTP-Anruf sehen und die gleichen Daten werden von den angerufenen Teilnehmern geteilt.
![](https://post.nghiatu.com/assets/tutorial/rxjs/images/observable_subscribers.jpg)
Verhalten Betreff
Das Verhaltensthema gibt Ihnen den neuesten Wert, wenn Sie aufgerufen werden.
Sie können ein Verhaltensthema wie unten gezeigt erstellen -
import { BehaviorSubject } from 'rxjs';
const subject = new BehaviorSubject("Testing Behaviour Subject");
// initialized the behaviour subject with value:Testing Behaviour Subject
Beispiel
Hier ist ein Arbeitsbeispiel für die Verwendung von Behaviour Subject -
import { BehaviorSubject } from 'rxjs';
const behavior_subject = new BehaviorSubject("Testing Behaviour Subject");
// 0 is the initial value
behavior_subject.subscribe({
next: (v) => console.log(`observerA: ${v}`)
});
behavior_subject.next("Hello");
behavior_subject.subscribe({
next: (v) => console.log(`observerB: ${v}`)
});
behavior_subject.next("Last call to Behaviour Subject");
Ausgabe
![](https://post.nghiatu.com/assets/tutorial/rxjs/images/behaviour_subject.jpg)
Betreff wiedergeben
Ein Wiederholungsobjekt ähnelt dem Verhaltensthema, wobei es die Werte puffern und sie den neuen Abonnenten wiedergeben kann.
Beispiel
Hier ist ein funktionierendes Beispiel für ein Wiedergabethema -
import { ReplaySubject } from 'rxjs';
const replay_subject = new ReplaySubject(2);
// buffer 2 values but new subscribers
replay_subject.subscribe({
next: (v) => console.log(`Testing Replay Subject A: ${v}`)
});
replay_subject.next(1);
replay_subject.next(2);
replay_subject.next(3);
replay_subject.subscribe({
next: (v) => console.log(`Testing Replay Subject B: ${v}`)
});
replay_subject.next(5);
Der verwendete Pufferwert ist 2 für das Wiedergabethema. Die letzten beiden Werte werden also gepuffert und für die neu angerufenen Teilnehmer verwendet.
Ausgabe
![](https://post.nghiatu.com/assets/tutorial/rxjs/images/replay_subject.jpg)
AsyncSubject
Im Fall von AsyncSubject wird der zuletzt aufgerufene Wert an den Abonnenten übergeben und erst nach dem Aufruf der Methode complete () ausgeführt.
Beispiel
Hier ist ein Arbeitsbeispiel dafür -
import { AsyncSubject } from 'rxjs';
const async_subject = new AsyncSubject();
async_subject.subscribe({
next: (v) => console.log(`Testing Async Subject A: ${v}`)
});
async_subject.next(1);
async_subject.next(2);
async_subject.complete();
async_subject.subscribe({
next: (v) => console.log(`Testing Async Subject B: ${v}`)
});
Hier wird vor dem Aufruf von complete der letzte an das Thema übergebene Wert 2 und derselbe Wert, den er den Abonnenten gegeben hat.
Ausgabe
![](https://post.nghiatu.com/assets/tutorial/rxjs/images/async_subject.jpg)