RxJS，the ReactiveX library for JavaScript
RxJS官网
1 Rxjs用到的设计模式
- 观察者模式（Observer pattern）
- 迭代器模式（Iterator pattern）
- 函数编程与集合等设计模式
主要目的：有效管理非同步环境下的事件资料
RxJS是一组用来处理非同步或事件的JavaScript函式库
非同步
- AJAX / XHR / Fetch
- Service Worker / Node Stream
- setTimeout / setInterval
- Promise
事件
- 各式DOM事件（click、dblclick、keyup、mousemove）
- CSS动画事件（CSS3 transitionEnd event）
- HTML5 Geolocation / WebSockets / Server Send Event
2 RxJS的核心概念
Observable 可观察的物件
Observer 观察者物件
- 代表一个用来接收【观察结果】的物件（收到的就是事件资料）
- 观察者物件就是一个物件包含3个含有回呼函式的属性（next、error、complete）
Subscription 订阅物件
- 代表正在执行 Observable / Observer 的执行个体（可用来取消订阅）
Operators 运算子
- 必须拥有函数编程中所定义的纯函数特性（没有副作用的函式）
- 必须用来处理一系列的事件资料集合
- 常见的运算子包含map、filter、concat、flatMap、switchMap https://reactive.how/
Subject 主体物件
- 如同 EventEmitter 一样，主要用来广播收到的事件资料给多位 Observer（观察者）
Schedulers 排程控制器
- 用来集中管理与调度多重事件之间的资料，以控制事件并发情况
import {
Subject } from 'rxjs';
import {
throttleTime } from 'rxjs/operators';
export class CreateBackupComponent implements OnInit {
clickOne = new Subject;
ngOnInit() {
this.clickOne.pipe(throttleTime(500)).subscribe((params) => {
this.saveData(params);
})
}
saveData(params) {
const {
id, name} = params;
...
}
okButton: {
'click': () => {
message.close();
this.clickOne.next({
id: newsId, name: newsName });
}
}
}
// 点击button，执行click事件：this.clickOne.next()
// 执行this.clickOne.next()，相当于执行this.saveData()事件
// this.clickOne.next()传入的参数{ id: newsId, name: newsName }，就是this.saveData()中的参数；
// 最终结果：连续点击click，每500毫秒只执行一次saveData事件
3 RxJS的运作方式
interval：rxjs的内置函数；
interval(500)：每500毫秒发送一个数字，从0开始；
pipe：将每500毫秒送出的事件资料讲给take进行处理；
take(4)：只取前面4笔；
subscribe：订阅者，subscribe()中的就是订阅者observer
rxjs.interval(500).pipe(rxjs.operators.take(4)).subscribe(console.log)
0
1
2
3
// interval：建立运算子，建立observable物件
// pipe：过滤运算子
// console.log：观察者
// 解构
import {
interval } from 'rxjs';
import {
take } from 'rxjs.operators';
interval(500).pipe(take(4)).subscribe(console.log)
const subs = rxjs.interval(500).pipe(rxjs.operators.take(40)).subscribe(console.log)
// 每隔500毫秒发送一个数字，从0开始，发送到40
subs.unsubscrible(); // 暂停订阅
3.1 RxJS运作方式
- 建立可观察的Observable物件
var click$ = rxjs.fromEvent(document, 'click')
- 建立观察者物件
var observer = {
next: (x) => console.log(x) };
observer可以是函数，也可以是物件，物件有三种属性：next，error，complete
- 建立订阅物件（订阅Observable物件，并传入Observer观察者物件）
var subs$ = click$.subscribe(observer);
- 取消订阅Subscription物件
subs$.unsubscribe();
observable不会主动触发观察，需要有人订阅subscribe，才会触发观察行为 ；
接水管，连续过滤：
var subs$ = click$.pipe(
filter(d => d.clientX < 500),
take(4)
).subscribe(observer);
3.2 RxJS主体物件（Subject）用法
- 建立主体物件（之后要用主体物件进行广播）
var subject = new rxjs.Subject();
- 建立可观察的Observable物件
var clicks$ = rxjs.fromEvent(document, 'click')
- 设定最多取得两个事件资料就将Observable物件设为完成
clicks$ = clicks$.pipe(take(2));
- 设定将clicks$全部交由subject主体物件进行广播
clicks$.subscribe(subject);
- 最后由subject建立Observer观察者物件
var subs1$ = subject.subscribe((x) => console.log(x.clientX));
var subs2$ = subject.subscribe((x) => console.log(x.clientY));
- 取消订阅
subs1$.unsubscrible();
subs2$.unsubscribe();
subject帮助实现一个Observable被多个observer订阅的效果，相当于中间商；
subject在多个页面怎么操作；
4 常见的Operator运算子
4.1 建立运算子
负责建立一个Observable物件
- from
- ajax
- defer
- generate
- fromEvent
- interval
- of
- range
4.2 组合建立运算子
将多个Observable物件组合成一个Observable物件
- race
- zip
- merge
- forkJoin
- concat
- combineLatest
4.3 转换运算子
将Observable传入的资料转换成另一种格式
- concatMap
- map
- mapTo
- buffer
- switchMapTo
4.4 过滤运算子
负责将Observable传入的资料过滤掉
- debounce
- debounceTime
- filter
- skip
- throttle
- throttleTime
4.5 组合运算子
负责组合多个Observable
- combineAll
- concatAll
- startWith
4.6 多播运算子
负责将Observable广播给多位观察者
- publish
- share
4.7 错误处理运算子
负责处理Observable观察过程中出现的例外错误
- catchError
- retry
- retryWhen
import {
retry } from 'rxjs/operators';
ngOnInit(): void {
this.http.get('/assets/area.json')
.pipe(retry(3))
// 请求不到数据，会再次尝试3次，还是抓不到就放弃，可以搭配delay等，延迟一定时间再retry
.subscribe(data => {
getArea(data);
})
}
4.8 工具函式运算子
负责提供Observable执行过程的工具函式
- tap
- delay
- timeout
4.9 条件式与布尔运算子
负责计算特定条件并回传布尔值的运算子
- defaultEmpty
- find
- every
- isEmpty
4.10 数学与汇总运算子
负责将Observable传来的资料进行数学/汇总运算
- count
- max
- min
- reduce