RxJS 中 Observable、Observer 和 Subscription 的关系
在前端开发中，RxJS 可能不是那么容易被人熟知，但是它的强大功能和便捷的操作对于程序员来说无疑是非常好的。RxJS 中非常重要的三个概念是 Observable、Observer 和 Subscription。
- Observable 是什么？
Observable 是表示未来要处理的一系列值的集合。这些值可以是从远程服务器上获取的，也可以是用户交互或本地计算机系统事件。Observable 是一个能够异步地传递多个值到一个观察者的对象。
一个简单的 Observable 示例：
import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
subscriber.next('Hello');
subscriber.next('world');
subscriber.complete();
});在这个例子中，我们创建了一个 Observable 来发出 hello 和 world 这两个值，然后这个 Observable 就完成了。
- Observer 是什么？
Observer 是一个能够响应 Observable 发送的值的对象。它通过处理 Observable 发出的值来执行一些操作。
一个简单的 Observer 示例：
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ----- ---------- - --- --------------------- -- - ------------------------- ------------------------- ---------------------- --- ---------------------- ----- --- -- ----------------- --------- -- -- ----------------------- ---
在这个例子中，我们创建了一个 Observer 来处理 Observable 发出的值。我们可以看到 console 中输出了 "Hello" 和 "world"，并在 Observable 完成时打印了 "complete"。
- Subscription 是什么？
Subscription 是一个表示可清理资源的对象，通常用于取消 Observable 中的订阅。 Subscription 对象有一个未来清理的函数，当调用这个函数时，订阅会被自动取消，并且释放所有关联内存。如果我们不取消订阅，那么我们可能会遇到内存泄漏的问题。
一个简单的 Subscription 示例：
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ----- ---------- - --- --------------------- -- - ------------------------- ------------------------- ---------------------- --- ----- ------------ - ---------------------- ----- --- -- ----------------- --------- -- -- ----------------------- --- ---------------------------
在这个例子中，我们创建了一个 Subscription 来取消 Observable 中的订阅。当 subscription.unsubscribe() 被调用时，Observable 将不再发出值，并且 Observable 也被清除出内存。
结论：
Observable、Observer 和 Subscription 三者之间的关系是：Observable 发出值，Observer 处理这些值，Subscription 用于取消订阅 Observable。
最后，我想再提供一个复杂一些的示例来演示它们之间的关系。
在这个示例中，我们使用一个 Observable 来定时生成一些数字，并将它们合并成一组数字。每当生成数字时，我们将它们发送给 Observer，然后在控制台中打印其总和。
-- -------------------- ---- -------
------ - ---------- - ---- -------
----- ---------- - --- --------------------- -- -
--- --- - --
-------------- -- -
----- ------ - ------------------------ - ----
--- -- -------
------------------------
-- ------
------------- -- -
----------------------- ---------
----------------------
-- ------
---
----- -------- - -
----- --- -- --------------------- --- - ------ ---------
------ --- -- --------------------- --- -- ------ ---------
--------- -- -- --------------------- -- ----------
--
----- ------------ - -------------------------------在这个例子中，我们可以看到 Observable 定时生成数字并将它们发送给 Observer，然后在 5 秒后发送它们的总和，并在控制台中打印出来。我们还使用 Subscription 来取消订阅 Observable，并释放它们关联的内存，在我们不需要这些值时，这非常有用。
希望这篇文章对您有所帮助，让您了解了 Observable、Observer 和 Subscription 的关系，并指导您在 RxJS 中使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673008a1eedcc8a97c90e512