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

rxjs入门5创建数据流

原文：https://www.cnblogs.com/honkerzh/p/10858233.html