rxjs入门5之创建数据流

一 创建同步数据流

1.creat

Observable.create = function (subscribe) {
return new Observable(subscribe);
};

2.of:列举数据

of(1,2,3).pipe(filter(curr=>curr>=2)).subscribe(console.log);
//2
//3

3.range:指定范围

range(1,100).pipe(map(value=>value)).subscribe(console.log); //从1到100的所有正整数
//1
//2
//...
//3

4.generate:循环创建

generate类似⼀个for循环，设定⼀个初始值，每次递增这个值，直到满⾜某个条件的时候才中⽌循环，同时，循环体内可以根据当前值产⽣数据。⽐如，想要产⽣⼀个⽐10⼩的所有偶数的平⽅。

const source$ = Observable.generate(
2, // 初始值，相当于for循环中的i=2
value => value < 10, //继续的条件，相当于for中的条件判断
value => value + 2, //每次值的递增
value => value * value // 产⽣的结果
);

三个极简的操作符：empty、never 和 throw

1.empty:empty就是产⽣⼀个直接完结的Observable对象，没有参数，不产⽣任何数据，直接完结，下⾯是⽰例代码：

const source$ = Observable.empty();

2.never:never产⽣的

Observable对象就真的是什么都不做，既不吐出数据，也不完结，也不产⽣错误，就这样待着，⼀直到永远。

const source$ = Observable.never();

3.throwError:throwError产⽣的Observable对象也是什么都不做，直接出错，抛出的错误就是throw的参数，下⾯是使⽤throw的⽰例代码：

const source$ = Observable.throwError(new Error('Oops'));

never、empty和throw单独使⽤没有意义，但是，在组合Observable对象时，如果需要这些特殊的Observable对象，这三个操作符可以直接使⽤，例如，根据条件是否产⽣出错的数据流如

const source$ = Observable.never();
$source.concat(shouldEndWell? Observable.empty() : Observable.throw(new Error()));

创建异步数据流

1.interval 和 timer

interval：interval接受⼀个数值类型的参数，代表产⽣数据的间隔毫秒数，返回的Observable对象就按照这个时间间隔输出递增的整数序列。

interval(1000).pipe(take(10),map(value=>value + 1)).subscribe(console.log);  //每隔1s返回 从2开始依次递增,take(10)代表取10个数据值，到输出10 结束

timer :timer(2000,1000)还⽀持第⼆个参数，如果使⽤第⼆个参数，那就会产⽣⼀个持续吐出数据的Observable对象，类似interval的数据流。第⼆个参数指定的是各数据之间的时间间隔，从被订阅到产⽣第⼀个数据0的时间间隔，依然由第⼀个参数决定

const source$ = Observable.timer(2000, 1000);//source$被订阅之后，2秒钟的时刻吐出0，然后3秒钟的时刻吐出1，4秒钟的时刻吐出2……依次类推：

2.from :可以把一切转化为Observable

from可能是创建类操作符中包容性最强的⼀个了，因为它接受的参数只要“像”Observable就⾏，然后根据参数中的数据产⽣⼀个真正的Observable对象。

比如：数组，类数组，字符串，⼀个JavaScript中的generator也很像Observable，Promise 对象...

function * generateNumber(max) {
    for (let i=1; i<=max; ++i) {
        yield i;
    }
}
const source$ = Observable.from(generateNumber(3));

const promise = Promise.resolve('good');
from(promise).subscribe(
    console.log,
    error => console.log('catch', error),
    () => console.log('complete')
);
//结果：
//good
//complete

Promise对象虽然也⽀持异步操作，但是它只有⼀个结果，所以当Promise成功完成的时候，from也知道不会再有新的数据了，所以⽴刻完结了产⽣的Observable对象。当Promise对象以失败⽽告终的时候，from产⽣的Observable对象也会⽴刻产⽣失败事件

3.fromEvent

如果从事⽹页开发，fromEvent是最可能会被⽤到的操作符，因为⽹页应⽤总是要获取⽤户在⽹页中的操作事件，⽽fromEvent最常见的⽤法就是把DOM中的事件转化为Observable对象中的数据.fromEvent的第⼀个参数是⼀个事件源，在浏览器中，最常见的事件源

就是特定的DOM元素，第⼆个参数是事件的名称，对应DOM事件就是click、mousemove这样的字符串.

<div>
<button id="clickMe">Click Me</button>
<div id="text">0</div>
</div>

let clickCount = 0;
fromEvent(document.querySelector('#clickMe'), 'click').subscribe(
    () => {
        document.querySelector('#text').innerText = ++clickCount
    }
);

4.ajax

详情请见 ajax在项目中的封装

defer

在创建之时并不会做分配资源的⼯作，只有当被订阅的时候，才会去创建真正占⽤资源的Observable，之前产⽣的代理Observable会把所有⼯作都转交给真正占⽤资源的Observable。这种推迟占⽤资源的⽅法是⼀个惯⽤的模式，在RxJS中，defer这个操作符实现的就是这种模式。

const observableFactory = () => Observable.of(1, 2, 3);
const source$ = Observable.defer(observableFactory);

const observableFactory = () => Observable.ajax(ajaxUrl);
const source$ = Observable.defer(observableFactory);