RxJS 入门心得

RxJS 6 入门

什么是RxJS

RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable，附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等)，这些数组操作符可以把异步事件作为集合来处理。

可以把 RxJS 当做是用来处理事件的 Lodash 。

ReactiveX 结合了 观察者模式、迭代器模式 和 使用集合的函数式编程，以满足以一种理想方式来管理事件序列所需要的一切。

RxJS的核心概念

• Observable 可观察对象
  • 代表一组未来即将产生的事件或值（被观察的对象）
• Observer 观察者对象
  • 代表一个用来接收观察结果的对象（接收到的就是事件或值）
• Subscription 订阅对象
  • 代表正在执行Observable/Observer的执行个体（可用来取消订阅）
• Operators 操作符
  • 必须拥有函数式编程中所定义的纯函数特性（没有副作用的函数）
  • 主要用来处理一系列的事件或值
  • 产检的操作符包含map, filter, concat, flatMap, switchMap, …
• Subject 主体对象
  • 如同EventEmitter一样，主要用来广播收到的事件或值给多个Observer（观察者）
• Schedulers 调度器
  • 调度器控制着何时启动 subscription 和何时发送通知

前五个较常用

入门示例

• 官网https://v6.rxjs.dev/

• 打开控制台执行以下代码

  rxjs.interval(500)  // 创建可观察对象
  	.pipe(rxjs.operators.take(4))  // 过滤操作
  	.subscribe(console.log)  // 订阅观察
  
  // 最终返回订阅对象，可通过订阅对象的unsubscribe方法取消订阅
  

• 事件监听示例

  // 建立可观察的对象Observalbe
  let $click = rxjs.fomEvent(document, 'click');
  // 建立观察者对象
  let observer = { next: (x) => console.log(x) };
  // 建立订阅对象
  let subs = $click.subscribe(observer);
  // 取消订阅
  subs.unsubscribe();
  

• 过滤操作示例

  // 建立可观察的对象Observalbe
  let $click = rxjs.fomEvent(document, 'click');
  // 使用filter操作符
  const { filter } = rxjs.operators;
  $click = $click.pipe(filter((x) => x.clientX < 1000));
  // 建立订阅对象(直接建立观察者并订阅)
  let subs = $click.subscribe((x) => console.log(x));
  // 取消订阅
  subs.unsubscribe();
  

• 多个操作符组合

  // 建立可观察的对象Observalbe
  let $click = rxjs.fomEvent(document, 'click');
  // 使用filter操作符 + take操作符
  const { filter, take } = rxjs.operators;
  $click = $click.pipe(
      filter((x) => x.clientX < 1000),
      take(2)
  );
  // 建立订阅对象(直接建立观察者并订阅)
  let subs = $click.subscribe((x) => console.log(x));
  // 取消订阅
  subs.unsubscribe();
  

Subject示例

const { Subject } = rxjs;
const { take } = rxjs.operators;
// 建立主体对象（之后拿这个主体对象进行广播）
let subject = new Subject();
// 建立可观察的Observable对象
let $click = rxjs.fromEvent(document, 'click')
// 设置最多触发两次就完成
$click = $click.pipe(take(2));
// 将$click交由subject主体对象广播（    即是观察者，又是可观察对象）
$click.subscribe(subject);
// 最后再由subject去建立Observer观察者对象
let subs1 = subject.subscribe((x) => console.log(x.client));
let subs2 = subject.subscribe((x) => console.log(x.client));

// 取消订阅
subs1.unsubscribe();
subs2.unsubscribe();

弹珠图

弹珠图（Marble diagrams）就是用图例形象地表示 Observable 和各种操作符的一种方法。
用 - 表示一小段时间，X 代表有错误发生， | 表示结束，() 表示同步发生

RxJS操作符弹珠图解: https://rxmarbles.com/

别的RxJS学习网站: https://reactive.how/

操作符

• 创建操作符 (Creation Operators)

  • 负责建立一个Observable对象
  • 常用: from, fromEvent, fromEventPattern, interval, of, range, throwError, timer
  • 其它: ajax, bindCallback, bindNodeCallback, defer, empty, generate, iif

• 组合建立操作符 (Join Creation Operators)

  • 可将多个Observable对象组合成一个Observable对象(以组合的形式建立)
  • 常用: combineLatest, concat, forkJoin, merge
  • 其它: race, zip, partition

• 转换操作符 (Transformation Operators)

  • 负责将Observable传入的数据转成另一种格式
  • 常用: concatMap, concatMapTo, map, mapTo, mergeMap, mergeMapTo, switchMap, switchMapTo, pluck
  • 其它: buffer, bufferCount, bufferTime, bufferToggle, bufferWhen, exhaust, exhaustMap, expand, groupBy, mergeScan, pairwise, partition, scan, window, windowCount, windowTime, windowToggle, windowWhen

• 过滤操作符 (Filtering Operators)

  • 负责将Observable传入数据过滤/筛选掉
  • 常用: debounce, debounceTime, distinct, filter, first / last, skip / take, throttle, throttleTime
  • 其它: audit, auditTime, distinctUntilChanged, distinctKey, distinctUntilKeyChange, elementAt, ignoreElements, sample, sampleTime, single, skipLast, skipUnit, skipWhile, takeLast, takeUntil

• 组合操作符 (Join Operators)

  • 负责组合多个已经建立了的Observable
  • 常用: combineAll, concatAll, mergeAll, startWidth
  • 其它: exhaust, widthLatestFrom

• 多播操作符 (Multicasting Operators)

  • 负责将Observable广播给多位观察者
  • 常用: publish, publishReplay, share
  • 其它: multicast, publishBehavior, publishLast

• 错误处理操作符 (Error Handling Operators)

  • 负责处理Observable观察过程中出现的例外错误
  • 常用: catchError, retry, retryWhen

• 工具操作符 (Utility Operators)

  • 负责提供Observable执行过程的工具函数
  • 常用: tap, delay, materialize, timeout, timeoutWidth, toArray
  • 其它: delayWhen, dematerialize, observeOn, subscribeOn, timeInterval, timestamp

• 条件与布尔操作符 (Conditional and Boolean Operators)

  • 负责计算特定条件并返回布尔值的操作符
  • 常用: defaultEmpty, every, find, findIndex, isEmpty

• 数学和聚合操作符 (Mathematical and Aggregate Operators)

  • 负责将Observable传来的数据进行数学/聚合运算
  • 常用: count, max, min
  • 其它: reduce

参考资料：

RxJS中文文档
一小时入门RxJS，中文教学放心适用，讲解非常棒
RxJS官网