深入浅出Rxjs笔记 二
2019-07-03 本文已影响0人
月半女那
三.操作符基础
在RxJs中‘操作符’其实是operator,他并不是一个字符,而是函数。
- 静态操作符和实例操作符
- 静态操作符:不需要Observable实例就可以执行的函数。可以直接调用例如Observable.of......
- 实例操作符:需要提前创建好一个Observable对象,是添加在observable.prototype属性上的函数
所有的操作符都是函数,无论是静态操作符还是是实例操作符,都会返回一个Observable对象,不同点是,在链式调用中,静态操作符只能出现在首位,而实例操作符可以出现在任何位置。
- 操作符分类
- 创建类(creation)
- 转化类(transformation)
- 过滤类(filtering)
- 合并类(combination)
- 多播类(multicating)
- 错误处理类(err Handling)
- 辅助工具类(utiliy)
- 条件分支类(conditional&boolean)
- 数学和合计类(mathmatical & aggregate)
创建类一定是数据流的源头,他是没有上游的
- 如何实现操作符
- 返回一个全新的Observable对象
- 对上游和下游的订阅以及退订处理
- 处理异常情况
- 及时释放资源
可以使用bind绑定特定的Observable对象
有时候不希望一个操作符影响所有的Observable对象,所以使用bind,也可以使用call区别就是call是立即执行,而bind是创建一个新函数,也可以使用绑定操作符::,这样解决了无法链式调用的问题
const result = source$::map(x => x*2)::map(x => x-1)
- pipeable/letable
pipeable: 值 |> 函数
pipeable操作符使用方法:
666 |> foo |> bar
=> bar(foo(666))
四.创建数据流
在RxJs中一切都以数据流为中心,在代码中,数据流以Observable类的实例对象形式存在,创建Observable对象就是创建数据流处理的开始
- 创建类操作符往往不会从其他Observable对象获取数据,在数据管道中,创建类操作符就是数据流的源头。所以创建类操作符大部分是静态操作符。
功能需求 | 使用的操作符 |
---|---|
直接操作观察者 | create |
根据有限的数据产生同步数据 | of |
产生一个数值范围内的数据 | range |
以循环方式产生数据 | generate |
重复产生数据流中的数据 | repeat/repeatWhen |
产生空数据流 | empty |
产生直接出错是数据 | throw |
产生用不完结的数据 | never |
间隔给定时间持续产生数据 | interval/timer |
从数组等枚举类型数据产生数据流 | from |
从promise对象产生数据流 | fromPromise |
从外部事件对象产生数据流 | fromEvent / fromEventPattern |
从AJAX产生数据流 | ajax |
延迟产生数据流 | defer |
- create
Observable.create = function(subscribe){
return new Observable(subscribe)
}
创建同步数据的Observable对象
- of
可以轻松创建指定数据集合的Observable对象
import { of } from 'rxjs';
of(10, 20, 30)
.subscribe(
console.log,
null,
()=> {
console.log('complete')
}
);
// 10
// 20
// 30
complete
在数据被subscribe时,吐出数据的过程时同步的,没有任何时间间隔,在数据产生完毕之后,对应的Observable对象也就完结了。
of 产生的是Cold Observable对于每一个Observer都会重复吐出同样的一组数据所以可以反复使用
- range
使用场景:需要产生很大连续数字序列
range(start: number = 0, count?: number, scheduler?: SchedulerLike):
Observable<number>
import {range} from 'rxjs'
range(1,40).subscribe(
console.log,
null,
()=> {
console.log('complete')
})
// 1
// 2
// 3
// .
// .
// .
// 39
// 40
// complete
- generate循环创建
generate类似于一个for循环,可以创建出自己想要的数字或者字符串序列
generate<T, S>(
initialStateOrOptions: S | GenerateOptions<T, S>,
condition?: ConditionFunc<S>,
iterate?: IterateFunc<S>,
resultSelectorOrObservable?: (ResultFunc<S, T>) | SchedulerLike,
scheduler?: SchedulerLike): Observable<T>
// initialStateOrOptions:初始值
// condition:条件
// iterate: 每次递增值的变化,是个函数
// resultSelectorOrObservable: 产生结果
import {generate} from 'rxjs'
generate(1,x=> x <10, x=> x+2, x=> x+'haha').subscribe(
console.log,
null,
()=> {
console.log('complete')
})
// 1haha
// 3haha
// 5haha
// 7haha
// 9haha
// complete