RxJS 是一个强大的响应式编程库，它被广泛应用于前端开发的各个方面。然而，最近 Angular 官方发布了一个新的技术，这个新技术被称为 Observables。官方文档也明确表示，Observables 可替代 RxJS 的绝大多数用法。所以，RxJS 是否会被抛弃？本文将深入挖掘 Observables 的内部工作原理，并给出实际的示例代码，以便读者深入了解 Observables 的优缺点。
Observables 和 RxJS 究竟有什么不同？
Observables 和 RxJS 都提供了响应式编程的能力，只不过二者的实现方式不同而已。
RxJS 是基于 pull-based 的遍历方式，可以被多次订阅和取消。这种方式称为“Hot Observable”，即，它能够发出多次值，每个订阅者都能收到完整序列的值。
Observables 则是基于 push-based 的推送方式，只能被订阅一次，这种方式称为“Cold Observable”，即，它只能推出一次值，而后面的订阅者就只能收到空序列。
为了更好地理解 Observables 和 RxJS 之间的差异，我们可以通过下面的示例代码来演示：
-- -------------------- ---- -------
------ - ---------- - ---- -------
-- ---- ----------
----- --- - --- ----------------------- -- -
------------------ -------- ------------
------------- -- -
-------------------
----------------------
---
---
--------------------- -- -
----------------------- -- -- -------
---
--------------------- -- -
----------------------- -- -- -------
---在上面的代码中，我们创建了一个 Cold Observable，该 Observable 会推出一个值 1，并在推送值后直接结束。我们通过两个订阅者 Subscriber 1 和 Subscriber 2 分别订阅了该 Observable。运行这段代码，我们可以看到控制台输出如下：
Start emitting values... Subscriber 1: 1 Start emitting values... Subscriber 2: 1
也就是说，订阅者 1 和 2 都收到了值 1。这是因为，我们创建的是 Cold Observable，每个订阅者都会收到完整序列的值。
如果我们将上面示例中的 Observable 改为 RxJS 的 Observable，也就是将 const obs = new Observable(...) 改为 const obs = Rx.Observable.of(1)，结果就会变成：
Subscriber 1: 1 Subscriber 2: 1
这是因为，RxJS 的 Observable 是基于 pull-based 的遍历方式，每个订阅者都能够收到完整序列的值。
Observables 的优点是什么？
观察者模式是一种广泛应用于软件开发中的设计模式，其中一个主要的优点是“数据即消息”。换句话说，我们可以将“数据”包装成“消息”发送给其他对象，而其他对象就可以在收到该消息之后处理它。由于 Observables 的本质就是观察者模式的一种实现方式，因此，它具有以下优点：
- 异步处理：由于 Observables 以异步方式推出数据，可以有效地解决 JavaScript 中常见的“回调地狱”问题，并且使得代码更具可读性、可维护性；
- 可复用性：由于 Observables 是基于数据流的模式，因此可以在一些复杂的业务场景中构建可复用的数据流，避免了对数据流的重复定义；
- 可组合性：由于 Observables 具有丰富的操作符，可以对 Observable 进行组合、映射、过滤等操作，从而实现更为复杂的数据流处理。
Observables 的缺点是什么？
除了优点以外，Observables 也存在着以下缺点：
- 学习曲线较陡峭：和 RxJS 相比，Observables 的 api 更为简洁，但是 Observables 相关的概念较多，需要花费一定的时间进行学习和掌握；
- 代码量更多：Observables 相比较简单的 JavaScript 回调函数体系，需要写更多的代码来实现同样的功能。
如何替代 RxJS？
事实上，Observables 并不能完全替代 RxJS。在某些场景下，RxJS 仍然是更好的选择。但是，如果只是为了处理简单的异步逻辑，Observables 可以胜任。
下面，我们将以 Angular 中的 http 调用为例，来演示如何使用 Observables 来完成异步处理。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
------------
--------- -----------
--------- -
--------------- ---------
------- ----------------------- -------------
-----------------------
----
------- ----------------------- -------------
-------------------------
--
------- --
--
------ ----- ------------ ---------- ------ -
----------- - -----------------------------------------------
------------ - -----------------------------------------------
--------- -------
----- ----
------------------- ----- ----------- --
---------- --
--------- -
------------- - -----
---------------------------------------
-----------
--- -- ------------- - ----
--- -- ----------------
--
-
--------- -
--------- - -----
----- --------------- --------------- - ---------------------------------
-------------------------
--- -- --------- - ----
--- -- -----------------
-- -- ---------------- ---- -------
--
-
-在上面的代码中，我们通过 Angular 的HttpClient 模块发起了 http 请求。在 getData() 方法和 getUser() 方法中，我们分别使用了 RxJS 的 Observable 和 Angular 的 HttpClient，并将 Observable 对象订阅了一次。在订阅响应时做出相应的处理。
需要注意的是，与 RxJS 不同的是，当我们订阅后结束后，数据流也会跟着结束。因此，我们必须要注意 Observable 资源的释放问题。
总结
本文深入解析了 Observables 和 RxJS 的异同点，以及 Observables 的优缺点。同时，我们也以 Angular 中的 http 请求为例，演示了如何使用 Observables 替代 RxJS 的应用场景。虽然 Observables 并不能完全替代 RxJS，但是对于一些简单的异步业务场景，使用 Observables 更为简单直观。如果想要深度学习 Observables 相关的内容，可以参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eb0608f6b2d6eab35b3352