RxJS 是前端开发中常用的函数式编程库，它支持基于流的编程模式。在 RxJS 中，observable 作为最重要的概念之一，可以让我们轻松地处理异步数据流。而 observable 又可以分为冷 observable 和热 observable，这种区分常常会让初学者困惑，本文将详细介绍冷和热 observable 的概念、区别和使用场景，帮助读者更好地理解和使用 RxJS。
可观察的 Observable
RxJS 中的 observable 相当于一个生产数据的管道，我们可以对这个管道进行订阅并监听管道里面的数据流，当然也可以在过程中对数据做一些操作。在 RxJS 中，observable 可以理解为一个抽象的想法，这个概念经常出现在 Promise、异步请求、事件等等的处理中。
举个例子，我们可以将从服务器获取的数据分别用 Promise 和 observable 来处理：
-- -------------------- ---- -------
-- ------- --
---------------------------------
-------------- -- ----------------
---------- -- -
------------------
---
-- ---------- --
------ - -- - ---- -------
------------------------------
-------------- -- -
----------
-------------- -- ----------------
---------- -- -
------------------
---
---以上代码中，我们用 Promise and Observable 分别从服务器获取数据，但是 Observable 这种实现方法可以方便地实现数据流的监听和操作。
冷 Observable
先来看一下冷 Observable 的例子：
-- -------------------- ---- -------
------ - ---------- - ---- -------
----- ---- - --- ------------------- -- -
-----------------
-----------------
-----------------
---
---------------- -- ---------------- ------ --------
---------------- -- ---------------- ----- ------ --------以上代码创建了一个 observable，它每次执行 observer.next() 都会产生一个值，并且我们分别订阅了两次，结果如下：
Got value: 1 Got value: 2 Got value: 3 Got value again: 1 Got value again: 2 Got value again: 3
观察输出结果可以发现，对于同一个 observable，每次订阅都会产生独立的数据流，也就是每次订阅都会重新执行 observable 内部的逻辑。这就是冷 Observable 的概念。
注意事项
- 每次订阅都是独立的，对于每个订阅者而言，不同的订阅也不会互相干扰。
- 订阅时会重新执行 observable，因此对于有状态的 observable，每次订阅的状态都是不一样的。
热 Observable
再来看一下热 Observable 的例子：
-- -------------------- ---- -------
------ - ---------- - ---- -------
----- --------- - --- ------------------- -- -
--- - - --
-------------- -- -
-------------------
-- ------
---
--------------------- -- ----------------------- -- --------
--------------------- -- ----------------------- -- --------以上代码创建了一个 observable，并且每隔一秒就会产生一个值。对于这个 observable 我们创建了两个订阅者，输出结果如下：
Subscriber A: 0 Subscriber A: 1 Subscriber B: 0 Subscriber A: 2 Subscriber B: 1 Subscriber A: 3 Subscriber B: 2
可以看到两个订阅者输出的值是不一样的，但是这些值是共享的。也就是说，我们只订阅了一个 observable，每隔一秒产生的值会被所有订阅者共享，这就是热 Observable 的概念。
注意事项
- 热 Observable 的数据流和订阅者共享，即每个订阅者都拿到同样的值。
- 热 Observable 通常可以用
Subject、ReplaySubject、BehaviorSubject等方式来创建。
总结
- 冷 Observable 是每次订阅都会重新执行 observable，从而产生独立的数据流。
- 热 Observable 是订阅一次就共享一次产生的数据。
- 冷 Observable 适用于任务单独运行的情况，而热 Observable 适用于共享同一组数据的情况。
对于 RxJS 的初学者来说，深度理解冷和热 observable 非常重要，因为不同的场景需要不同的 Observable 实现方式。希望本文能够帮助读者更好地使用 RxJS，写出更加优美和高效的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e7510ef6b2d6eab32e47dd