Subject of RxJS study notes

This article is an original article, please indicate the source when reprinting

content

1. Subject
2. BehaviorSubject
3. ReplaySubject
4. AsyncSubject

1. Subject

In general, Subjectboth a special observable that can multicast values ​​to multiple observers, because observers can be added and use subscribemethods to receive values; and observers, because it has next(v), error(e), and complete()methods. The following code is a good illustration of each Subjectis Observableand is 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: 1
observerB: 1
observerA: 2
observerB: 2

2. BehaviorSubject

BehaviorSubjectThe ability to save the current value, when a new observer subscribes, will immediately BehaviorSubjectreceive the current value from . In the following code, the initial value is 0, although the second observer is subscribed after 2sending out, but saves the current value, and immediately receives the current value BehaviorSubjectfrom when the second observer subscribes .BehaviorSubject2

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: 0
observerA: 1
observerA: 2
observerB: 2
observerA: 3
observerB: 3

3. ReplaySubject

ReplaySubjectBehaviorSubjectSimilar to , ReplaySubjectit can save a specified number of data, and when a new observer subscribes, it will ReplaySubjectreceive the specified number of these values ​​from and play it back. The following code specifies that data can be 3saved , and when the second observer subscribes, the three saved values 2, 3, , are obtained 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: 1
observerA: 2
observerA: 3
observerA: 4
observerB: 2
observerB: 3
observerB: 4
observerA: 5
observerB: 5

In addition, ReplaySubjectyou can also specify how long windowTimeto save the data so far. The following code specifies that the data can be saved, and the 100data that can be saved so far is 500milliseconds .

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: 1
observerA: 2
observerA: 3
observerA: 4
observerA: 5
observerB: 3
observerB: 4
observerB: 5
observerA: 6
observerB: 6
...

4. AsyncSubject

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

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: 5
observerB: 5

If there is any inappropriate, please correct me, thank you~