什么是 RxJS
RxJS 是一个使用可观测序列来编写异步和基于事件的程序的库。其核心思想是把所有异步操作都看成数据流，通过组合操作符来处理这些数据流实现各种功能。
RxJS 与传统编程模型的对比
- 传统编程模型：把异步操作看成事件，通过回调函数或 Promise 处理异步结果。
- RxJS 编程模型：把异步操作看成数据流，通过组合操作符处理数据流和事件。
通过 RxJS，我们可以把复杂的异步逻辑分解成简单的数据流和操作符，使代码更易读、易理解和易维护。
RxJS 基本操作
创建可观测序列
of：创建一个可观测序列，包含指定的一些值。from：从数组、类数组、Promise 等对象中创建一个可观测序列。interval：创建一个可观测序列，每隔指定的时间就会产生一个整数。
import { of, from, interval } from 'rxjs'; const source1$ = of(1, 2, 3); // 创建一个包含 1、2、3 的可观测序列 const source2$ = from([1, 2, 3]); // 从数组中创建一个可观测序列 const source3$ = interval(1000); // 每隔1秒产生一个整数的可观测序列
变换数据流
map：通过指定的转换函数，把数据流中的每个元素转换成另一个元素。filter：返回数据流中符合条件的元素。tap：观察数据流中的元素，不对数据流进行任何操作。
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - ---- ------- --- - ---- ----------------- ----- ------- - ----- -- -- -- --- ----- ------- - ------------- ----- -- - - --- -- -------------- -------- -- - -- --- -- --------- ----- -- ------------------- --- -- --------------------- -- ------------------- -- ---------------------- ---- -- --- -- ---- - -- ------- - -- ---- - -- ------- - -- ---- - -- ------- - -- ---- -- -- ------- --展开代码
组合多个数据流
concat：把多个数据流连接成一个数据流。merge：把多个数据流合并成一个数据流。combineLatest：当任何一个数据流发生变化时，计算所有数据流的最新值并发出。
-- -------------------- ---- ------- ------ - ---------- -------- - ---- ------- ------ - ------- ------ ------------- - ---- ----------------- ----- -------- - ------------------------- -- --------- -- -------- ----- -------- - ------------------------- -- --------- -- -------- ----- ------- - ---------------- ---------- ----- ------ - --------------- ---------- ----- -------- - ----------------------- ---------- ------------------- -- ---------------------- ---- -- ----------- -- - -------- -- - -------- -- - --------- -- - -------- -- - -------- -- - - ------------------ -- --------------------- ---- -- ----------- -- - -------- -- - -------- -- - -------- -- - --------- -- - - ----------------------- --- -- ----------------------- -- ---- -- ----------- -- - -------- -- - -------- -- - -------- -- - -------- -- - -------- -- - -展开代码
处理错误和完成
在 RxJS 中，我们可以使用 catchError 操作符来处理错误，使用 finalize 操作符来处理流结束时的清理工作。
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - ----------- -------- - ---- ----------------- ----- ------- - ----- -- --- ----- ------- - ------------- ----- -- - -- -- --- -- - ----- --- -------------- --------- - ------ -- --- ---------------- -- ---------- - - --------------- ----------- -- ------------------------- -- ------------------- ----- - -- --------------- ------ --- -- ------------------- --------- -- -- -------------------- --- -- ---- ------ ------- ------ ---------展开代码
RxJS 常见应用场景
计时器
import { interval } from 'rxjs'; interval(1000).subscribe(x => console.log(x)); // 每隔1秒输出一个整数
节流
import { fromEvent } from 'rxjs'; import { throttleTime } from 'rxjs/operators'; fromEvent(window, 'scroll') .pipe(throttleTime(1000)) // 在1000ms内只处理一次滚动事件 .subscribe(event => console.log(event));
自动完成
-- -------------------- ---- ------- ------ - ---------- -- - ---- ------- ------ - ---------- ------------- -------------------- - ---- ----------------- ----- ----- - -------------------------------- ---------------- -------- ------ ------------------- -- ------------------- ----------------------- -- -------------- ------------ -- -------------------- -- ---- - ----------------- -- --------------------- -------- --------------- ------- - ------ ---------- ------ -- ------------- -展开代码
拖拽排序
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ------- ------ - ---- ---------- -------- - ---- ----------------- ----- ---- - ----------------------------- --------------- ------------ ------ ---------------- ----------- -- - ----- ---- - ------------ -- ------------ -- --------------------------- --- ----- - ------- - ----- ------ - -------------- ----- ------ - --------------- ------ ------ ------------------- ------------------ ----------- ----------- -- - ----------------------- ----- ----- - ------------- - ------- -------------- - ------ - ----- - ----- --- ----------------------------- ----------- -- --------------- ---------- -- -- - ------------- -- - -- ---- ---展开代码
小结
本文介绍了 RxJS 的基本概念和操作符，以及常见应用场景。通过使用 RxJS，我们可以更轻松、更优雅地处理各种异步逻辑，提高代码质量和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c2cb76314edc2684c54ce1
