一 创建同步数据流
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);