在 RxJS6 中，我们可以使用「多播」操作符来实现一次订阅多处响应的效果，这对于一些需要同时处理多个响应的业务场景非常有用。本文将深入讨论 RxJS6 中的「多播」操作符，包括其原理、使用方法、示例代码以及使用上的一些注意事项，以帮助读者更好地理解和应用这个操作符。
原理
在 RxJS 中，观察者模式的核心思想是将「Observable」作为被观察的对象，然后为其添加观察者（也就是订阅者），当「Observable」产生新的值时，它会自动向所有的观察者广播这个值。这种广播方式称为「单播」，也就是一次订阅只有一个响应。而在某些业务场景中，我们需要实现一次订阅多处响应的功能，例如同时向多个 API 发送请求，然后等待所有的响应结果再一起处理。这就需要使用「多播」操作符。
「多播」操作符的原理是将「Observable」转换为「ConnectableObservable」，也就是将单播的「Observable」转换成多播的「ConnectableObservable」，然后在「ConnectableObservable」上添加多个观察者，当观察者订阅「ConnectableObservable」时，「Observable」不会直接向观察者广播新值，而是会等待「ConnectableObservable」手动调用「connect」方法，此时「Observable」的值会广播给所有的观察者。
使用方法
使用「多播」操作符需要先将「Observable」转换成「ConnectableObservable」，可以使用「publish」或「multicast」来进行转换，然后再通过「connect」方法手动触发广播。
publish
「publish」操作符可以将「Observable」转换成「ConnectableObservable」，并返回一个「ConnectableObservable」对象。可以在「ConnectableObservable」上添加多个观察者，当一个观察者订阅「ConnectableObservable」时，「Observable」不会直接向观察者广播新值，而是会等待其他的观察者一起处理。
-- -------------------- ---- ------- ------ - -------- - ---- ------- ------ - ------- - ---- ----------------- ----- ------- - -------------------- -------- --------- -- ------------------ - -- ----------------------- -- ------ -- ------------------ - -- ----------------------- -- ------ -- ------------------
上述代码首先通过「interval」创建一个每秒产生一个值的「Observable」，然后通过「publish」操作符将其转换成「ConnectableObservable」，接下来添加两个观察者订阅「ConnectableObservable」，最后调用「connect」方法触发广播。当观察者订阅时，「Observable」不会直接向它们广播新值，而是会等待「connect」方法调用，此时所有的观察者会一起接收到这些值。
multicast
「multicast」操作符和「publish」操作符类似，也可以将「Observable」转换成「ConnectableObservable」，但它可以自定义观察者的数量和类型。这个操作符接收一个「Subject」作为参数，然后返回一个「ConnectableObservable」对象。可以在「ConnectableObservable」上添加多个观察者，当一个观察者订阅「ConnectableObservable」时，「Observable」不会直接向观察者广播新值，而是会等待其他的观察者一起处理。
-- -------------------- ---- ------- ------ - --------- ------- - ---- ------- ------ - --------- - ---- ----------------- ----- ------- - -------------------- -------- ------------ -- --- ---------- -- ------------------ - -- ----------------------- -- ------ -- ------------------ - -- ----------------------- -- ------ -- ------------------
上述代码首先通过「interval」创建一个每秒产生一个值的「Observable」，然后通过「multicast」操作符将其转换成「ConnectableObservable」，这里传入一个新建的「Subject」对象作为参数，接下来添加两个观察者订阅「ConnectableObservable」，最后调用「connect」方法触发广播。当观察者订阅时，「Observable」不会直接向它们广播新值，而是会等待「connect」方法调用，此时所有的观察者会一起接收到这些值。
示例代码
下面是一个使用「多播」操作符的具体示例代码：
-- -------------------- ---- ------- ------ - --------- ------- - ---- ------- ------ - ----- --------- - ---- ----------------- ----- ------- - -------------------- -------- ------------ -- --- ---------- -- ----- --------- - - ----- - -- ----------------------- -- ------ -- ----- --------- - - ----- - -- ----------------------- -- ------ -- ----- --------- - - ----- - -- ----------------------- -- ------ -- ----- ---- - ----------------------------- ----- ---- - ----------------------------- ------------------ ------------- -- - ----- ---- - ----------------------------- -- ------
上述代码首先通过「interval」创建一个每秒产生一个值的「Observable」，然后通过「multicast」操作符将其转换成「ConnectableObservable」，这里传入一个新建的「Subject」对象作为参数。接下来定义三个观察者「observer1」、「observer2」和「observer3」，其中「observer3」需要在 2 秒后订阅。接下来「observer1」和「observer2」分别订阅「ConnectableObservable」，最后调用「connect」方法触发广播。当观察者订阅时，「Observable」不会直接向它们广播新值，而是会等待「connect」方法调用，此时所有的观察者会一起接收到这些值。在 2 秒后，「observer3」订阅「ConnectableObservable」，也会接收到之前的值。
注意事项
使用「多播」操作符要注重以下几点：
- 由于「ConnectableObservable」需要手动触发广播，因此一定要在所有的观察者订阅之后再调用「connect」方法；
- 在使用「multicast」操作符时要传入一个「Subject」对象作为参数，因此需要注意在订阅前「Subject」对象是否已经创建；
- 不要忘记取消订阅，否则会造成内存泄漏。
总结
在需要一次订阅多处响应的业务场景中，「多播」操作符是 RxJS6 中非常有用的操作符。对于初学者来说，理解「多播」操作符的原理、使用方法和注意事项是非常重要的。本文通过深入讲解「多播」操作符的原理以及实际示例代码，希望可以帮助读者更好地理解和应用这个操作符。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64de2133f6b2d6eab3968cd4