引言
RxJS 是一个功能强大的响应式编程框架，它使用数据流的方式来处理异步事件，提高了代码的可读性、可维护性和可测试性。但是，对于很多初学者来说，RxJS 中的冷（cold）observable 和热（hot）observable 的概念经常会引起混淆和困惑。本文将详细介绍 RxJS 中的 cold observable 和 hot observable 的区别，并且给出例子和使用指导。
什么是 Observable？
在 RxJS 中，Observable 是一个表示异步数据流的核心抽象概念。它表示一个数据流，可以被订阅，然后异步将数据推送给观察者（Subscriber）。Observable 可以产生零个或多个值，还可以产生一个错误或者没有任何值。Observable 一般用于处理异步数据源，如 Ajax 请求、Websocket 或者定时器等。
冷 Observable
冷 Observable 表示一个数据流，当它被订阅时，会创建一个全新的数据源，并且数据流的值是独立于订阅者的。简单来说，冷 Observable 的行为就像一个录播机，它从头开始记录数据并且不管有没有观众，录像都会持续进行。
举个例子，我们通过 Ajax 请求获取一个数字列表。
const { ajax } = require('rxjs/ajax'); const { catchError } = require('rxjs/operators'); const cold$ = ajax.getJSON('/numbers').pipe( catchError(error => console.error(error)) );
在这个例子中，我们创建了一个 cold$ Observable，它使用 ajax.getJSON() 获取来自 /numbers 的数据。如果我们将 cold$ Observable 订阅两次，我们将会对同一个数据流进行两次 Ajax 请求，这是因为 cold$ Observable 是独立的数据源。代码如下：
cold$.subscribe( val => console.log(`First Subscription: ${val}`) ); cold$.subscribe( val => console.log(`Second Subscription: ${val}`) );
输出：
// First Subscription: [1, 2, 3, 4, 5] // Second Subscription: [1, 2, 3, 4, 5]
热 Observable
热 Observable 表示一个数据流，不管有没有订阅者，它都会推送值给观察者。简单来说，热 Observable 的行为就像一个直播视频或者广播电视节目，它会在一开始就推送数据流，并且所有订阅都会接收到相同的值。
举个例子，我们用 interval(1000) 创建一个热 Observable。
const { interval } = require('rxjs'); const hot$ = interval(1000);
在这个例子中，我们创建了一个 hot$ Observable，它通过 interval(1000) 每隔一秒钟推送一个递增的数字。如果我们将 hot$ Observable 订阅两次，两个订阅者将会同时接收到递增的数字流。代码如下：
hot$.subscribe( val => console.log(`First Subscription: ${val}`) ); hot$.subscribe( val => console.log(`Second Subscription: ${val}`) );
输出：
// First Subscription: 0 // Second Subscription: 0 // First Subscription: 1 // Second Subscription: 1 // First Subscription: 2 // Second Subscription: 2 ...
区别
从上面的例子可以看出，冷 Observable 和热 Observable 的区别在于它们产生的数据流的独立性。当几个订阅者订阅一个冷 Observable 时，每个订阅者都将获得一个新的独立数据源，它们的订阅是相互独立的。而当几个订阅者订阅一个热 Observable 时，它们将会共享相同的数据源，它们的订阅是共享的。
具体来说，冷 Observable 的特点是：
- 对于每个订阅者都会产生一个新的独立数据源。
- 数据的推送是惰性的，当有订阅者时才开始推送数据。
- 订阅者之间的数据流是相互独立的。
而热 Observable 的特点是：
- 所有订阅者共享相同的数据源。
- 数据的推送是立即的，当 Observable 开始工作时就开始推送数据。
- 订阅者之间的数据流是共享的。
指导意义
对于初学者，理解 cold Observable 和 hot Observable 的区别是很重要的。理解这两种 Observable 可以帮助我们更好的理解 RxJS 的工作机制，从而更好的使用它来处理异步事件。
对于实践者，需要根据自己的需求来选择合适的 Observable。如果需要在多个地方多次订阅 Observable，可以选择 cold Observable。而如果仅需在一个地方订阅 Observable，可以选择 hot Observable。
在实际使用中，我们可以通过 share() 操作符来将 cold Observable 转化为 hot Observable。代码如下：
const hot$ = cold$.pipe( share() );
这样，我们就可以将 cold$ 转化为 hot$，并且使用 share() 操作符，将 cold Observable 转换为 multicast Observable。
结论
本文详细介绍了 RxJS 中的 cold Observable 和 hot Observable，包括定义、特点、区别和使用指导。对于初学者来说，理解这两种 Observable 是 RxJS 学习过程中的重要基础；对于实践者来说，需要选择合适的 Observable 来满足自己的需求。最后，希望本文能够对大家学习 RxJS 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e7aede9a7045d0d6a87e6
