Rxjs笔记五：操作符的分类以及创建数据流(creation)

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++;
        }
    )
    
}