Rxjs - ReplaySubject

74 阅读1分钟

ReplaySubject类似于BehaviorSubject,因为它可以向订阅者发送旧值,但是它也可以记录Observable执行的一部分。

ReplaySubject记录Observable执行中的多个值,并将它们重播给新的订阅者。

创建ReplaySubject时,可以指定要重播的值的数量:

  const subject = new ReplaySubject(3); // 记录前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);
   
  // Logs:
  // observerA: 1
  // observerA: 2
  // observerA: 3
  // observerA: 4
  // observerB: 2
  // observerB: 3
  // observerB: 4
  // observerA: 5
  // observerB: 5

除了缓冲区大小之外,还可以指定一个以毫秒为单位的窗口时间,以确定所记录的值的年龄。在下面的示例中,我们使用的缓冲区大小为100,但窗口时间参数仅为500毫秒。
只有新的订阅才能执行缓存的历史值,当第二次执行observerB时,他不会再执行缓存了

  // 100: 最多缓存100个值
  // 500: 表示缓存的时间窗口为 500 毫秒
  // 意思是当新的观察者订阅时,他会接收到在当前订阅前500ms内发送的且最多不超过 100 个的值。
  const subject = new ReplaySubject(100, 500 /* windowTime */); 
   
  subject.subscribe({
    next: (v) => console.log(`observerA: ${v}`),
  });
   
  let i = 1;
  setInterval(() => subject.next(i++), 200);
   
  setTimeout(() => {
    subject.subscribe({
      next: (v) => console.log(`observerB: ${v}`),
    });
  }, 1000);
   
  // Logs
  // observerA: 1
  // observerA: 2
  // observerA: 3
  // observerA: 4
  // observerA: 5
  // observerB: 3
  // observerB: 4
  // observerB: 5
  // observerA: 6
  // observerB: 6
  // ...

应用场景:需要缓存记录的地方