对于前端开发者来说，RxJS 是一个重要的技能。它是一个基于 Observables 和 Operators 的 Reactive Programming 库，可以使开发者更加轻松地处理异步数据流，从而得到更好的用户体验和代码质量。
Observables
Observables 是 RxJS 的核心。它是一个表示异步数据流的对象，可以用来观察数据流的变化并对其进行处理。你可以把 Observables 看作是所有异步操作的基础。
在 RxJS 中，Observables 通过 Observable 构造函数来创建。例如，下面这个 Observable 会每隔 1000 毫秒产生一个数字：
import { Observable } from 'rxjs';
const observable = new Observable((subscriber) => {
let i = 0;
setInterval(() => {
subscriber.next(i++);
}, 1000);
});在 Observer 中订阅 observable 来接收数据流中的数据：
observable.subscribe({
next: (value) => console.log(value),
});这样就可以输出产生的数字。
Operators
Operators 可以用来对 Observables 进行转换、组合和过滤操作。它们是为了使 Observables 更加灵活和高效而被引入的。在 RxJS 中，有很多内置的 Operators，也可以自己实现一个 Operator。
例如，map() 是一个常用的 Operators，它可以将一个 Observable 中的每个值转换为另一个值：
-- -------------------- ---- -------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
----- ---------- - --- ----------------------- -- -
--- - - --
-------------- -- -
---------------------
-- ------
---
----------------
----------- -- ----- - --
-------------
----- ------- -- -------------------
---这样就可以输出每个数字的两倍。
Subject
在 Observables 中，数据流是冷启动的，这意味着每次订阅 Observables 时都会重新开始数据流。而 Subject 可以对数据流进行热启动，即可以在订阅之前缓冲和回放已经产生的值。
Subject 是一种既是 Observable 又是 Observer 的对象。它有 next()、error()、complete() 方法，可以向订阅者发送消息，也可以自己订阅其他 Observables。例如：
-- -------------------- ---- ------- ------ - ------- - ---- ------- ----- ------- - --- ---------- -- ----- ------------------- ----- ------- -- ------------------- --- -- ---- ------------------- ---------- -- --------- -------------------- ---------- ------------------- ---------- -- ----- ---------- ----- ---------- - --- ----------------------- -- - ----------------------- ---------- --- ------------------------------ -- ------ -------------------
这样，订阅者就可以收到缓冲和回放的前两个值和另一个 Observable 中的值。
总结
这篇文章介绍了 RxJS 的三个核心概念：Observables、Operators 和 Subject。它们都是用来处理异步数据流的工具，可以使开发者更加容易和高效地进行 Reactive Programming。
在下一篇文章中，我们将进一步了解 RxJS 中的其他内容，例如 schedulers、subscription 和 Observable 的生命周期管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648854aa48841e98946d7cd8