RxJS 中的多播操作符：share、publish 和 refCount 的区别-JavaScript中文网-JavaScript教程资源分享门户

RxJS 是一个强大的响应式编程库，它提供了许多操作符，可以方便地处理异步数据流。在 RxJS 中有一类特殊的操作符，称为多播操作符，它们可以将一个可观察对象转换成一个多播可观察对象，这样多个观察者可以共享同一个数据流。本文将介绍三个常用的多播操作符：share、publish 和 refCount，并说明它们的区别。

share 操作符

share 操作符可以将一个可观察对象转换成一个多播可观察对象，让多个观察者共享同一个数据流。它的实现原理是使用了 Subject 对象。具体来说，share 操作符会创建一个 Subject 对象，并将它作为可观察对象的订阅者，然后将 Subject 对象转换成一个可观察对象，让多个观察者订阅它。

import { Observable } from 'rxjs';
import { share } from 'rxjs/operators';

const source$ = new Observable<number>(subscriber => {
  console.log('source$ is subscribed');
  setInterval(() => {
    subscriber.next(Math.random());
  }, 1000);
});

const shared$ = source$.pipe(share());

shared$.subscribe(value => {
  console.log(`Observer A: ${value}`);
});

setTimeout(() => {
  shared$.subscribe(value => {
    console.log(`Observer B: ${value}`);
  });
}, 3000);

上面的代码中，我们首先创建了一个可观察对象 source$，它每秒钟会产生一个随机数。然后我们使用 share 操作符将它转换成一个多播可观察对象 shared$。我们首先订阅 shared$，输出 Observer A: xxx 的信息，然后等待 3 秒钟后再订阅 shared$，输出 Observer B: xxx 的信息。由于使用了 share 操作符，因此 Observer A 和 Observer B 会共享同一个数据流，它们都会收到相同的随机数。

publish 操作符

publish 操作符也可以将一个可观察对象转换成一个多播可观察对象，让多个观察者共享同一个数据流。它的实现原理是使用了 ConnectableObservable 对象。具体来说，publish 操作符会创建一个 ConnectableObservable 对象，并将它作为可观察对象的订阅者，然后将 ConnectableObservable 对象转换成一个可观察对象，让多个观察者订阅它。但是与 share 操作符不同的是，publish 操作符并不会自动连接 ConnectableObservable 对象，需要手动调用 connect 方法才能启动数据流。

import { Observable } from 'rxjs';
import { publish } from 'rxjs/operators';

const source$ = new Observable<number>(subscriber => {
  console.log('source$ is subscribed');
  setInterval(() => {
    subscriber.next(Math.random());
  }, 1000);
});

const published$ = source$.pipe(publish());

published$.subscribe(value => {
  console.log(`Observer A: ${value}`);
});

setTimeout(() => {
  published$.subscribe(value => {
    console.log(`Observer B: ${value}`);
  });
}, 3000);

published$.connect();

上面的代码中，我们首先创建了一个可观察对象 source$，它每秒钟会产生一个随机数。然后我们使用 publish 操作符将它转换成一个多播可观察对象 published$。我们首先订阅 published$，输出 Observer A: xxx 的信息，然后等待 3 秒钟后再订阅 published$，输出 Observer B: xxx 的信息。由于使用了 publish 操作符，因此 Observer A 和 Observer B 会共享同一个数据流，它们都会收到相同的随机数。最后我们手动调用 connect 方法启动数据流。

refCount 操作符

refCount 操作符可以将一个 ConnectableObservable 对象转换成一个普通的可观察对象。具体来说，refCount 操作符会自动计算 ConnectableObservable 对象的订阅数，如果订阅数为 0，就会自动调用 connect 方法启动数据流，如果订阅数变成了 0，就会自动调用 disconnect 方法停止数据流。这样可以方便地管理数据流的生命周期。

import { Observable } from 'rxjs';
import { publish, refCount } from 'rxjs/operators';

const source$ = new Observable<number>(subscriber => {
  console.log('source$ is subscribed');
  setInterval(() => {
    subscriber.next(Math.random());
  }, 1000);
});

const published$ = source$.pipe(publish(), refCount());

published$.subscribe(value => {
  console.log(`Observer A: ${value}`);
});

setTimeout(() => {
  published$.subscribe(value => {
    console.log(`Observer B: ${value}`);
  });
}, 3000);

上面的代码中，我们首先创建了一个可观察对象 source$，它每秒钟会产生一个随机数。然后我们使用 publish 和 refCount 操作符将它转换成一个普通的可观察对象 published$。我们首先订阅 published$，输出 Observer A: xxx 的信息，然后等待 3 秒钟后再订阅 published$，输出 Observer B: xxx 的信息。由于使用了 refCount 操作符，因此 Observer A 和 Observer B 会共享同一个数据流，它们都会收到相同的随机数。而且由于 refCount 操作符会自动管理数据流的生命周期，因此我们不需要手动调用 connect 和 disconnect 方法。

总结

在 RxJS 中，多播操作符可以将一个可观察对象转换成一个多播可观察对象，让多个观察者共享同一个数据流。常用的多播操作符有 share、publish 和 refCount。它们的区别在于，share 操作符使用了 Subject 对象，publish 操作符使用了 ConnectableObservable 对象，refCount 操作符可以方便地管理数据流的生命周期。在使用多播操作符时，需要注意数据流的启动和停止时机，以及多个观察者共享数据流的行为。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658e3032eb4cecbf2d403d10