前言
RxJS 是一个流式编程（reactive programming）框架，其思想基于观察者模式。在 RxJS 中，Subject 是一个非常重要的概念。本文将详细介绍 Subject 的功能和用法，以及一些实际应用场景。
什么是 Subject
Subject 是 RxJS 中的一个类型，它既可以观察也可以被观察。可以订阅 Subject 来接收数据，也可以通过调用 Subject 的 next 方法来发送数据。
Subject 表示一个可观察的事件流的源头，可以在 Subject 上面进行订阅和取消订阅操作。当创建一个 Subject 时，可以选择性的给它指定初始值。
Subject 的分类
在 RxJS 中，Subject 类型可以分为四种：
- BehaviorSubject（行为主题 Subject）
- ReplaySubject（重放主题 Subject）
- AsyncSubject（异步主题 Subject）
- Subject（普通主题 Subject）
BehaviorSubject
BehaviorSubject 是一个具有默认值的 Subject。它需要一个初始值，并且会在订阅时立即向订阅者发出该值。之后可以随时调用 next 方法来向订阅者发送新值。
import { BehaviorSubject } from 'rxjs';
const subject = new BehaviorSubject('default');
subject.subscribe(value => console.log(value)); // 输出：default
subject.next('new value'); // 输出：new valueReplaySubject
ReplaySubject 会在订阅时重新播放所有的值。它还需要指定一个 “缓存区” 大小，即可以保存多少个值。如果不传参数，则表示无限制。
-- -------------------- ---- ------- ------ - ------------- - ---- ------- ----- ------- - --- ----------------- ---------------- ---------------- ---------------- ----------------------- -- -------------------- -- ---- -
AsyncSubject
AsyncSubject 会在 Observable 完成时发出最后一个值。如果 Observable 在完成前没有发出任何值，则 AsyncSubject 不会发出任何值。
-- -------------------- ---- ------- ------ - ------------ - ---- ------- ----- ------- - --- --------------- ----------------------- -- -------------------- -- --------- ---------------- ---------------- ---------------- ------------------- -- ----
Subject
普通主题 Subject 是最简单的 Subject 类型，它不需要传递任何参数，并且当执行 next 方法时会向订阅者发出新值。
import { Subject } from 'rxjs';
const subject = new Subject();
subject.subscribe(value => console.log(value));
subject.next('new value'); // 输出：new valueSubject 的实际应用
1. 发布/订阅模式
Subject 可以用于实现发布/订阅模式。发布者调用 Subject 的 next 方法发布消息，订阅者通过订阅 Subject 接收消息。
-- -------------------- ---- ------- ------ - ------- - ---- ------- ----- ------- - --- ---------- -- --- ----------------------- -- ------------------------ -------- -- --- --------------------- ---- --------------------- ---- --------------------- ----
2. 可重用的 Observable
Subject 可以用于创建可重用的 Observable。可以向 Subject 中多次添加订阅并返回一个新的 Observable。
-- -------------------- ---- ------- ------ - ------- - ---- ------- ------ - ------ - ---- ----------------- ----- ------- - --- ---------- -- ---- ---------- ----- ---------- - ------------- ------------ -- ----- - -- -- -- --- - -------------------------- -- ------------------------ -------- -- --- ---------------- ---------------- ---------------- -- --- - -------------------------- -- ------------------------ -------- -- --- ----------------
输出：
Received: 3 Received: 4
3. 多播
Subject 还可以用于多播操作，即将一个 Observable 的多个订阅者转换为单个订阅者。
-- -------------------- ---- ------- ------ - ------- - ---- ------- ------ - -------- - ---- ------- ------ - ---- - ---- ----------------- ----- ------- - --- ---------- ----- ---------- - ----------------------------- -- -- ------------------------------ -- --- - ----------------------- -- ----------------------- - ----------- -------- -- --- - ------------- -- - ----------------------- -- ----------------------- - ----------- -------- -- ------
输出：
Subscriber 1 received: 0 Subscriber 1 received: 1 Subscriber 2 received: 1 Subscriber 1 received: 2 Subscriber 2 received: 2
由于 observable.subscribe(subject) 将 observable 转换为了一个 Subject，并在这个 Subject 上执行了订阅操作。因此，多个订阅者都订阅了 Subject，而不是 Observable。 subject.subscribe(value => console.log('Subscriber 2 received:', value)) 的执行被延迟了 1 秒，所以只接收到后两个值。
总结
本文详细介绍了 RxJS 中的 Subject 的分类、用法以及实际应用场景。Subject 是 RxJS 中非常重要的概念之一，在实际开发中也有很多用途。希望本文能为大家 RxJS 学习提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f19781f6b2d6eab3b69978