rxjs6 Subject

原文链接: rxjs6 Subject

上一篇: 向 vue 提交 pr

下一篇: nodejs axios 下载文件

Subject 和  Observable 都可以用来自定义流

const subject = new Subject();
subject.subscribe({
  next: (v) => console.log(`observerA: ${v}`)
});
subject.subscribe({
  next: (v) => console.log(`observerB: ${v}`)
});
subject.next(1);
subject.next(2);

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

普通subject不具备回放功能

const {Subject} = require('rxjs')
const sub = new Subject();

sub.next(1);
sub.subscribe(x => {
  console.log('Subscriber A', x)
});
sub.next(2); // OUTPUT => Subscriber A 2
sub.subscribe(x => {
  console.log('Subscriber B', x)
});
sub.next(3);  
// Subscriber A 2
// Subscriber A 3
// Subscriber B 3

ReplaySubject 可以回放数据, 可传入回放的数据长度

const sub = new ReplaySubject();
// Subscriber A 1
// Subscriber A 2
// Subscriber B 1
// Subscriber B 2
// Subscriber A 3
// Subscriber B 3

设置默认值, 订阅时如果没有数据, 则使用默认值

const sub = new BehaviorSubject('a');
sub.subscribe(x => {
  console.log('Subscriber A', x)
});

模拟多播

const {interval, ReplaySubject} = require('rxjs')
const {take, multicast, tap, mapTo} = require('rxjs/operators')

let source = interval(500)

let subject = {
  observers: [],
  addObserver: function (observer) {
    this.observers.push(observer)
  },
  next: function (value) {
    this.observers.forEach(o => o.next(value))
  },
  error: function (error) {
    this.observers.forEach(o => o.error(error))
  },
  complete: function () {
    this.observers.forEach(o => o.complete())
  }
}

subject.addObserver({
  next(v) {
    console.log('3, ', v)
  }
})

source.subscribe(subject)

setTimeout(() => {
  subject.addObserver({
    next(v) {
      console.log('4, ', v)
    }
  })
}, 1000);


// 3,  0
// 3,  1
// 4,  1
// 3,  2
// 4,  2
// 3,  3
// 4,  3
// 3,  4
// 4,  4