基本的几个操作符
-
of
of操作的参数依次输出所有的数据，此时是同步的。
let stream$ = Rx.Observable.of(1,2,3,4,5) -
from
from操作符的参数为数组。
let stream$ = Rx.Observable.from([1,2,3,3,5]) -
do
let stream$ = Rx.Observable.of(1,2,3,4).do(value => console.log(value))调试Observable使用
-
filter
过滤操作
let stream$ = Rx.Observable.of(1,2,3,4,5) .do(value => console.log(value)) .filter((value) => value % 2 === 0); stream$.subscribe(value => console.log('value',value))
高阶Observable操作符
- flatMap
对比理解 高阶函数 一个函数返回的还是一个函数。首先根据旧Observable的每个值重新产生一个新的Observable，然后flatMap重新将这些metastream的流中流变扁平
let stream$ = Rx.Observable.of(1,2,3)
.flatMap(val => {
return Rx.Observable.of(val)
.ajax({url: url})
.map(e => e.response)
})
-
switchMap
类似于 mergeMap，但是当源 Observable 发出值时会取消内部 Observable 先前的所有订阅 。
在实际开发中，常用于级联调用。
依赖调用意味这调用需要按照顺序执行，调用B必须再调用A执行返回后，
开发场景：
- 用户需要先登录
- 然后获取用户详情
- 然后可以获取用户订单
let stream$ = Rx.Observable.of({message:'Login in'}) .switchMap(result => { return Rx.Observable.of({id:1,name:'user'}) }).switchMap(user => { return Rx.Observable.from([ {id:114,userId:1}, {id:117,userId:1} ]) }) stream$.subscribe(orders => console.log('Order',orders))
组合操作符
- combineLatest
通常多个的Observable的组合在一起，我们通常需要使用组合操作符来组合两个或者两个以上的source
let source1 = Rx.Observable.interval(100).map(val => 'source1' + val).take(5);
let source2 = Rx.Observable.interval(50).map(val => 'source2' + val).take(2);
let stream$ = Rx.Observable.combineLatest(source1, source2);
stream$.subscribe(data => console.log(data));
业务场景
当你对每一个source的最新值都感兴趣的时候，而对之前的值不感兴趣的时候，可以选择使用使用combineLatest操作符来使用了。
-
concat
按照顺序来发送Observable
const getOne$ = Rx.Observable.timer(3000).mapTo({id:1}); const getTwo$ = Rx.Observable.timer(1000).mapTo({id:2}); Rx.Observable.concat(getOne$,getTwo$).subscribe(res => console.log(res));concat按照顺序来讲两个或者两个以上的Observable来组合起来，其中是严格的按照顺序来发送结果。
-
merge
merge将所有的流都合并在一起， 要点是这个操作符组合了几个流，并且就像你在上面所看到的一样，任何像
delay()这样的时间操作符都是起作用的。 而这个在concat上是不会起作用的。const getOne$ = Rx.Observable.of(1).delay(500); const getTwo$ = Rx.Observable.of(2,2,3,4,5); const merge$ = Rx.Observable.merge(getOne$,getTwo$).subscribe(value => console.log(value)); -
forkJoin
Rxjs版本的Promise.all 方法，别让我知道直到所有的 Observables 都完成了，然后再一次性的给我所有的值。(以数组的形式)
const getOne$ = Rx.Observable.timer(3000).mapTo({id:1}); const getTwo$ = Rx.Observable.timer(1000).mapTo({id:2}); Rx.Observable.forkJoin(getOne$,getTwo$).subscribe(results => console.log(results)); -
zip
采用的是以列为基础连接值的方式来组合Observable, 如果最后一个参数是一个函数的话则将几个Observable的值都提取出来给函数传参来处理。 依次从每一个Source的相同位置获取值， 一般返回为数组。如果没法凑齐一组则抛弃其他的值。
常规的用法
const one$ = Rx.Observable.of(1,2,3); const two$ = Rx.Observable.of(4,5); const three$ = Rx.Observable.of(6,7); Rx.Observable.zip(one$,two$,three$).subscribe(value => console.log(value));zip带参数的使用方法
const name$ = Rx.Observable.of('finch','wukong','zheng'); const age$ = Rx.Observable.of(12,15,18); const address$ = Rx.Observable.of('shenzhen','wuhan','HK'); Rx.Observable.zip(name$,age$,address$,(name,age,address) => ({name,age,address})).subscribe(value => console.log(value));
时间操作符
-
timer
-
参数为一个
const getValue$ = Rx.Observable.timer(500); getValue$.subscribe(value => console.log(value));延迟发送一个数据，然后结束所有的数据。
-
参数为两个
const getValue$ = Rx.Observable.timer(2000,100); getValue$.subscribe(value => console.log(value)); // 首先延迟2S发送一个 然后每隔0.1S发送一个数据
-
-
Interval
因为这个操作符会不停地生成值，所以倾向于和
take()操作符一起使用，这样可以在调用它之前限制生成值的数量，就像这样：const getValue$ = Rx.Observable.interval(100).take(5)每隔0.1s发出一个值 然后获取其中的前五个
-
delay
延迟发送Source每一个的数据。
const getValue$ = Rx.Observable.interval(100).take(5); getValue$.delay(500).subscribe(value => console.log(value)); -
debounceTime
Debounce 是一个已知的概念，特别是当你敲击键盘的时候。就像是在说，我们不在乎你的每次敲击键盘，但是一旦你停止打字后的一段时间是我们所关心的。
业务场景
在GUI编程中，比较常见的快速双击按钮是一个比较常见的功能需求，通常为了用户体验我们需要将过于快速的输入省略，直到用户停止输入然后我们才开始接下来的操作。
const input = document.getElementById('input'); const example = Rx.Observable .fromEvent(input, 'keyup') .map(i => i.currentTarget.value); // 在两次敲击键盘事件之间，有0.5秒的等待时间，如果时间小于0.5秒则丢弃前一个敲击键盘事件 const debouncedInput = example.debounceTime(500); const subscribe = debouncedInput.subscribe(val => { console.log(`Debounced Input: ${val}`); });上面的代码只会输出一个值，值来源于 input 表单，在你停止打字后的500毫秒后，才值得它报告一下，也就是发出一个值。
