RxJS 6 —— Subject

1. 概览

observable subject observe（ps: 自己分的类）

2. 单播

sample code:

import { Observable } from 'rxjs';
let observable = new Observable(subscribe =>{
  subscribe.next(1);
  subscribe.next(2);
  subscribe.complete();
})

let observer = {
  next:x=> console.log(x),
}

let subscription = observable.subscribe(observer);

3. 多播 subject

3.1 完整版

sample code:

import { from, Subject } from 'rxjs';
let subject = new Subject<number>();
subject.subscribe(x=>console.log(x));
subject.subscribe(x=>console.log(x));
let observable = from([1,2,3]);
observable.subscribe(subject);

3.2 简洁版

sample code:

import { Subject } from 'rxjs';
let subject = new Subject<number>();
subject.subscribe({
    next: (v) => console.log(`observerA: ${v}`)
  });
  subject.subscribe({
    next: (v) => console.log(`observerB: ${v}`)
  });

subject.next(1);
subject.next(2);

3.3 合并版 Multicasted Observables

3.3.1 合并版的手动版 connect()

sample code:

import { ConnectableObservable, interval, Subject } from 'rxjs';
import { multicast } from 'rxjs/operators';
 
const source = interval(500);
const subject = new Subject();
const multicasted = source.pipe(multicast(subject)) as ConnectableObservable<number>;
let subscription1, subscription2, subscriptionConnect;
 
subscription1 = multicasted.subscribe({
  next: (v) => console.log(`observerA: ${v}`)
});
// We should call `connect()` here, because the first
// subscriber to `multicasted` is interested in consuming values
subscriptionConnect = multicasted.connect();
 
setTimeout(() => {
  subscription2 = multicasted.subscribe({
    next: (v) => console.log(`observerB: ${v}`)
  });
}, 600);
 
setTimeout(() => {
  subscription1.unsubscribe();
}, 1200);
 
// We should unsubscribe the shared Observable execution here,
// because `multicasted` would have no more subscribers after this
setTimeout(() => {
  subscription2.unsubscribe();
  subscriptionConnect.unsubscribe(); // for the shared Observable execution
}, 2000);

• connect()手动调用和处理订阅
• multicast返回一个ConnectableObservable

bug

但在ts，multicast返回一个只返回Observable

3.3.2 合并版的自动版 refCount()

sample code:

import { ConnectableObservable, interval, Subject } from 'rxjs';
import { multicast } from 'rxjs/operators';
 
let observable = interval(500);
let subject = new Subject<number>();
let multicasted = observable.pipe(multicast(subject), refCount());

let subscription1, subscription2;
subscription1 = multicasted.subscribe({
  next:(v) => console.log(`observerA: ${v}`)
});


setTimeout(() => {
  subscription2 = multicasted.subscribe({
    next: (v) => console.log(`observerB: ${v}`)
  });
}, 600);


setTimeout(() => {
  subscription1.unsubscribe();
}, 1200);

setTimeout(() => {
  subscription2.unsubscribe();
}, 2000);

• ConnectableObservable的refCount()方法（引用计数）：返回一个Observable，跟踪其拥有的subscribe数量。当subscribe数量从0增加到时1，会自动执行connect()我，仅当subscribe数量从减少1到0时，才会完全取消订阅，从而停止进一步执行。

4. subject的变体

4.1 BehaviorSubject：存储发给消费者的最新值

sample code:

import { BehaviorSubject } from 'rxjs';
const subject = new BehaviorSubject(0); // 0 is the initial value
 
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);

4.2 ReplaySubject 保存多个值

参数 bufferSize?: number, windowTime?: number, scheduler?: SchedulerLike
sample code:

import { ReplaySubject } from 'rxjs';
const subject = new ReplaySubject(3); // buffer 3 values for new subscribers
 
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);

4.3 AsyncSubject：将最后一个值发送给它的消费者，并且仅在执行完成时发送

sample code:

import { AsyncSubject } from 'rxjs';
const subject = new 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();