The subject of RXJS study notes

This article is original article, reprint please indicate the source

Catalogue

1. Subject
2. Behaviorsubject
3. Replaysubject
4. Asyncsubject

1. Subject

In general, it is not only a special observable that Subject is capable of multicasting values to multiple observers, because you can add observers and use subscribe methods to receive values, but also observers, because they have next(v) , error(e) and complete() methods. The following code is a good illustration of each and every one of them Subject Observable Observer .

var subject = new Rx.Subject();subject.subscribe({  next: (v) => console.log(‘observerA: ‘ + v)});subject.subscribe({  next: (v) => console.log(‘observerB: ‘ + v)});subject.next(1);subject.next(2);

Output:

observerA: 1observerB: 1observerA: 2observerB: 2

2. Behaviorsubject

BehaviorSubjectThe ability to save the current value is immediately received from the current value when a new observer subscribes BehaviorSubject . In the following code, the initial value is 0 , although the second observer 2 subscribes after sending it, but BehaviorSubject saves the current value and BehaviorSubject receives the current value immediately from the second observer's subscription 2 .

var subject = new Rx.BehaviorSubject(0);subject.subscribe({  next: (v) => console.log(‘observerA: ‘ + v)});subject.next(1);subject.next(2);subject.subscribe({  next: (v) => console.log(‘observerB: ‘ + v)});subject.next(3);

Output:

observerA: 0observerA: 1observerA: 2observerB: 2observerA: 3observerB: 3

3. Replaysubject

ReplaySubjectand BehaviorSubject similar, the ReplaySubject ability to save a specified number of data, when a new observer subscription, will be received from the ReplaySubject specified number of these values and playback. The following code specifies the ability to save 3 data and, when the second observer subscribes, gets the saved three values, 2 3 4 .

var subject = new Rx.ReplaySubject(3); subject.subscribe({  next: (v) => console.log(‘observerA: ‘ + v)});subject.next(1);subject.next(2);subject.next(3);subject.next(4);subject.subscribe({  next: (v) => console.log(‘observerB: ‘ + v)});subject.next(5);

Output:

observerA: 1observerA: 2observerA: 3observerA: 4observerB: 2observerB: 3observerB: 4observerA: 5observerB: 5

In addition, ReplaySubject you can specify windowTime how long the data is to be saved so far, and the following code specifies the ability to save data to 100 specify the data that can be saved to the millisecond so far 500 .

var subject = new Rx.ReplaySubject(100, 500);subject.subscribe({  next: (v) => console.log(‘observerA: ‘ + v)});var i = 1;setInterval(() => subject.next(i++), 200);setTimeout(() => {  subject.subscribe({    next: (v) => console.log(‘observerB: ‘ + v)  });}, 1000);

Output:

observerA: 1observerA: 2observerA: 3observerA: 4observerA: 5observerB: 3observerB: 4observerB: 5observerA: 6observerB: 6...

4. Asyncsubject

AsyncSubjectOnly the last value when execution is completed can be sent to the observer. The following code, when the complete() last value is sent to the 5 first observer and the second observer.

var subject = new Rx.AsyncSubject();subject.subscribe({  next: (v) => console.log(‘observerA: ‘ + v)});subject.next(1);subject.next(2);subject.next(3);subject.next(4);subject.subscribe({  next: (v) => console.log(‘observerB: ‘ + v)});subject.next(5);subject.complete();

Output:

observerA: 5observerB: 5

If there is any improper, please correct, thank you ~

The subject of RXJS study notes