前言
RxJS 是一个广为人知的 JavaScript 库，它提供了一种优雅的方式来处理异步数据流，同时具有层次化且高度组合的特征。RxJS 不仅局限于前端领域，它涉及到嵌入式设备，服务端和移动应用开发等各个范围。
本文将从 RxJS 的核心概念开始，介绍 RxJS 的使用方式和常用操作符，以及如何在项目中使用 RxJS。
RxJS 核心概念
RxJS 中存在四个核心概念：Observables、Operators、Subscriptions 和 Subjects。
Observables
Observables 是 RxJS 中的核心概念，它表示一个可以被多次订阅的可观察的数据源。
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ----- ---- - --- --------------------- -- - ----------------------- ------------------------ --- ---------------- ----- ----- -- ----------------- --------- -- -- ------------------------- ---
上述代码中，创建了一个 Observable，并通过 next 方法向 Observer 推送了两个值。
Operators
Operators 是 RxJS 中用于操作 Observables 的函数。RxJS 提供了许多 Operators，如 filter、map、mergeMap、concat 等。
-- -------------------- ---- -------
------ - -- - ---- -------
------ - ---- ------ - ---- -----------------
----- ------- - ----- -- -- -- ---
-------
------
------------ -- --- - - --- ---
--------- -- --- - --
-
---------------- -- ------------------上述代码中，创建了一个 Observable，然后使用 filter 和 map 操作符对这个 Observable 进行操作。
Subscriptions
Subscriptions 表示一个可观察对象的订阅。
import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
const obs$ = interval(1000);
const sub = obs$.pipe(take(5)).subscribe((val) => console.log(val));
setTimeout(() => sub.unsubscribe(), 3000);上述代码中，创建了一个 interval Observable，用 take 操作符限制了 Observable 的数量，并通过 subscribe 订阅了这个 Observable。在 3 秒后，使用 unsubscribe 取消了订阅。
Subjects
Subjects 是 RxJS 中的一种特殊的 Observable，可以充当观察者和可观测源。可以通过 next 方法向 Subject 推送新值，并通过 subscribe 订阅 Subject 获取新值。
-- -------------------- ---- ------- ------ - ------- - ---- ------- ----- -------- - --- ---------- ------------------------ -- --------------------- -- ---------- ------------------------ -- --------------------- -- ---------- ----------------------- -----------------------
上述代码中，创建了一个 Subject，并通过 subscribe 订阅了这个 Subject。调用 next 方法向 Subject 推送了两个值。
RxJS 常用操作符
RxJS 提供了许多 Operators，这里介绍一些比较常用的 Operators。
map
map 操作符将 Observable 中每个元素转换为另一个元素。
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
const source$ = of('a', 'b', 'c');
source$.pipe(map((val) => val.toUpperCase())).subscribe((val) => console.log(val));上述代码中，使用 map 操作符将一个小写的字母转换为大写字母。
filter
filter 操作符用于过滤 Observable 中的元素。
import { of } from 'rxjs';
import { filter } from 'rxjs/operators';
const source$ = of(1, 2, 3, 4, 5);
source$.pipe(filter((val) => val % 2 === 0)).subscribe((val) => console.log(val));上述代码中，使用 filter 操作符过滤出了 Observable 中的偶数值。
tap
tap 操作符将 Observable 中的元素传入一个函数进行处理，但不会修改它们。
import { of } from 'rxjs';
import { tap } from 'rxjs/operators';
const source$ = of('a', 'b', 'c');
source$.pipe(tap((val) => console.log(`Before: ${val}`))).subscribe((val) => console.log(`After: ${val}`));上述代码中，使用 tap 操作符在处理 Observable 中的元素时输出一些调试信息。
mergeMap
mergeMap 操作符将 Observable 中的元素映射为 Observables，并将这些 Observables 合并为一个 Observable。
import { of } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
const source$ = of('Hello', 'World');
source$
.pipe(mergeMap((val) => of(`${val}!`, `${val}!!!`)))
.subscribe((val) => console.log(val));上述代码中，使用 mergeMap 操作符将 Observable 中的每个元素转换为两个 Observables，并将这些 Observables 合并为一个 Observable。
RxJS 在应用中的使用
RxJS 可以应用于很多场景，例如：
- 处理异步请求
- 监听用户输入
- 管理应用程序状态
- 整理复杂数据结构
下面以处理异步请求为例，介绍 RxJS 在应用中的使用。
-- -------------------- ---- -------
------ - -- - ---- -------
------ - --------- - ---- -----------------
------ - ---- - ---- ------------
----- ----------- - ----------------------------------------
----- --------- - --------------------------------------
----- ------- - ---------------------
----------------- -- --------------------------------------------
--
------------------------ -- -
------------------- - ---
------------------------------ -- -
----- --- - ------------------------------
------------- - -------------
---------------------------
---
---上述代码中，创建了一个搜索框和一个结果容器。使用 of 创建了一个 Observable，并使用 switchMap 在用户输入时调用 ajax 请求。当请求完成后，使用 subscribe 订阅了 Observable，并在结果容器中显示搜索结果。
总结
RxJS 是一个非常强大且灵活的库，用于处理异步数据流。通过 Observables、Operators、Subscriptions 和 Subjects 这些核心概念，可以实现高级的数据流操作。RxJS 在各种应用中的使用也非常广泛，例如处理异步请求、监听用户输入、管理应用程序状态、整理复杂数据结构等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c0575968c7c53b073cba8