1、操作符的分类
- 1、创建类(creation)：数据流的源头
- 2、转化类(transformation)：即是将原数据流传入，返回你需要的新的数据流。
- 3、过滤类(filtering)：对原数据流进行筛选过滤处理
- 4、合并类(combination)：合并多个Observable对象
- 5、多播类(multicasting)：Observable对象被不同的观察者订阅的时候，会同时把值下发给对应的观察者。
- 6、错误处理类(error Handling)：抛出或处理错误(catch)、重试。
- 7、辅助工具类(utility)：一些简单的计算或是条件布尔判断
- 8、条件分支类(conditional&boolean)：条件分支判断
- 9、数学和合计类(mathmatical&aggregate)：多用于一些数学的计算函数
中文文档地址：RxJS 中文文档
官网图.png
2、创建数据流
在RXJS中，数据流以Observable类的实例对象的形式存在着的，所以一般创建一个Observable对象就是创建原数据流。
| 操作符名称 | 操作符作用 |
|---|---|
| create | 直接去操作观察者 |
| of | 使用有限的数据产生同步数据流 |
| range | 产生一个数值范围内的数据 |
| repeat/repeatWhen | 重复产生数据流中的数据 |
| empty | 产生空数据流 |
| throw | 产生直接出错的数据流 |
| never | 产生永不完结的数据流 |
| interval/timer | 间隔给定时间持续产生数据流 |
| from | 从数组等枚举类型数据中产生数据流 |
| fromPromise | 从Promise对象产生数据流 |
| fromEvent/fromEventPattern | 从外部事件对象产生数据流 |
| ajax | 从ajax请求结果中产生数据流 |
| defer | 延迟产生数据流 |
创建类操作符大部分都是静态的操作符，在实际的项目开发中，应该使用RXJS提供的创建类操作符去创建数据，避免再去重复的使用Observable的构造函数去造轮子。
3、创建同步的数据流
同步的数据流之间的操作时间间隔是不存在的。
3.1、静态操作符
静态操作符直接在rxjs/observable这个文件中获取即可，共有以下几种。
- create：直接调用Observable的构造函数，返回一个Observable对象。
- of：创建指定的数据流集合
// 导入
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
const source$ = of([1,2,3,4,5]);
source$.subscribe(value => console.log(value)); // [1,2,3,4,5]
- range：对需要产生一个很大的连续数字的场景，就需要使用range
// 导入
import { range } from 'rxjs/observable/range';
const source$ = range(1,100);
source$.subscribe(value => console.log(value));
- generate：循环创建，类似一个for循环，一个初始值，每次递增一个值，直到完成条件才会终止循环。
// 导入
import { generate } from 'rxjs/observable/generate';
const source$ = generate(
2, // 初始值
value => value < 10, // 终止循环的条件
value => value += 2, // 递增条件
value => value // 输出的结果
);
source$.subscribe(value => console.log(value)); // 2 4 6 8
3.2、实例操作符
之前的都是静态操作符，下面的便是operator相关的实例操作符。
- repeat：重复的数据流
// 导入
import 'rxjs/add/operator/repeat';
const source$ = of(1,2,3)
source$.repeat(3).subscribe(value => console.log(value));
3.3、三大极简操作符
- empty：产生一个直接完结的Observable对象，不产生任何数据。
// 导入
import { empty } from 'rxjs/observable/empty';
const source$ = empty();
-
throw：产生一个Observable对象，直接出错，抛出的错误就是throw的参数。
由于throw是JS的关键字，直接导入throw的独立函数，也就是以打补丁的方式把throw挂在Observable类上，会出现允许报错的问题，所以导入的不是throw，而是_throw。
// 导入
import { _throw } from 'rxjs/observable/throw';
const source$ = _throw(new Error('123'));
source$.subscribe(value => console.log(value));
- never：产生一个Observable对象，既不生成数据，也不完结，也不会产生错误，就一直执行挂着。
// 导入
import { never } from 'rxjs/observable/never ';
const source$ = never() ;
4、创建异步数据的Observable对象
在创建数据流时，有的应用场景不仅仅需要考虑生成的数据问题，还需要考虑数据流生成的时间间隔。
- interval/timer：interval接受⼀个数值类型的参数，代表产⽣数据的间隔毫秒数，返回的Observable对象就按照这个时间间隔输出递增的整数序列，从0开始。⽐如，interval的参数是1000，那么，产⽣的Observable对象在被订阅之后，在1秒钟的时刻吐出数据0，在2秒钟的时刻吐出数据1....
// 导入
import { interval } from 'rxjs/observable/interval';
const source$ = interval(1000);
source$.subscribe(value => console.log(value));
在使用interval的时候，如果在用到复杂的数据流，就需要多个操作符组合起来使用
// 导入
import 'rxjs/add/operator/map';
import { interval } from 'rxjs/observable/interval';
const source$ = interval(1000);
source$.map(x => x*x).subscribe(value => console.log(value)); // 0 1 4 9 ........
图2.png
timer的第一个参数是数值，第二个参数是指的时间间隔
const source$ = timer(5, 1000);
- from：可以把一切转换成Observable对象
// 导入
import { from } from 'rxjs/observable/from';
const source$ = from([1,2,3]);
source$.subscribe(value => console.log(value)); // 1 2 3
- fromPromise：如果from的参数是Promise对象，那么在Promise对象成功结束后，from会生成一个Observable对象告知Promise执行的结果。
// 导入
import { from } from 'rxjs/observable/from';
const promise = Promise.resolve('promise message...');
const source$ = from(promise);
source$.subscribe(value => console.log(value));
- fromEvent：把DOM中的事件转换为Observable对象中的数据，第一个参数指的事件源(指定事件作用的DOM元素)，第二个参数是指的作用的事件类型。
<div>
<button id="btn">点击</button>
<div id="text">{{ count }}</div>
</div>
// 数据
data() {
return {
count: 0
}
}
// 导入
import { fromEvent } from 'rxjs/observable/fromEvent';
onAdd() {
console.log(this.count);
const event$ = fromEvent(document.querySelector('#btn'), 'click');
event$.subscribe(
() => {
this.count++;
}
)
}
网友评论