《深入浅出RxJS》 (2)

使用bind绑定特定的Observable对象

// 比如我们自己创建了一个map方法 function map(project) { return new Observable(observer => { const sub = this.subscribe({ next: value => observer.next(project(value)), error: err => observer.next(error), complete: () => observer.complete() }); return { unsubscribe: () => { sub.unsubscribe(); } }; }); } // 这个时候我们就可以主动使用bind改变this的指向 const result$ = map.bind(source$)(x => x * 2); // 或者直接使用call const result$ = map.call(source$, x => x * 2);

使用lift

lift是Observable的实例函数,它会返回一个新的Observable对象,通过传递给lift的函数参数可以赋予这个新的Observable对象特殊的功能

function map(project) { return this.lift(function(source$) { return source$.subscribe({ next: value => { try{ this.next(project(value)); }catch(err) { this.error(err); } }, error: err => this.error(error), complete: () => this.complete() }); }); } Observable.prototype.map = map; create

Observable.create() 其实就是简单的调用了Observable的构造函数

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

range(1, 10) 从1开始吐出10个数据
range(1.5, 3) 从1.5开始吐出3个数据,每次加1

generate

generate类似一个for循环,设定一个初始值,每次递增这个值,知道满足某个条件为止
使用generate实现range功能

const range = (start, count) => { const max = start + count; return Observable.generate( start, value => value < max, value => value + 1, value => value ); };

所有能够使用for循环完成的操作,都可以使用generate来实现

repeat 重复数据的数据流 const source$ = Observable.of(1,2,3); const repeated$ = source$.repeat(10); // 将source$中的数据流重复10遍 empty()

产生一个直接完结的Observable对象

throw()

产生的Observable对象什么都不做,直接抛出错误

never()

产生的Observable对象什么也不做,既不吐出数据,也不产生错误

interval()

接受一个数值类型的参数,代表产生数据的间隔毫秒数

timer()

第一个参数可以是一个数值,表示多少毫秒之后吐出第一个数值0
如果存在第二个参数,那就会产生一个持续吐出数据的Observable对象,第二个参数就是时间间隔

// 2s后。每隔1s产生一个数值,该数值从0开始递增 const source$ = Observable.timer(2000, 1000); from()

可以将一切转化为Observable

fromPromise()

可以将Promise对象转化为Observable对象,Promise如果成功则调用正常的成功回调,如果失败则调用失败的回调

fromEvent()

将DOM事件转化为Observable对象中的数据

// 将点击事件转化为Observable const source$ = Observble.fromEvent(document.querySelector('#id'), 'click'); ajax()

用来将ajax的返回转化为Observable对象

repeatWhen()

接受一个函数作为参数,这个函数在上游第一次产生异常是被调用,这个函数应该返回一个Observable对象

const notifier = () => { return Observable.interval(1000); }; const source$ = Observable.of(1,2,3); const repeat$ = source$.repeatWhen(notifier); defer()

当defer产生的Observable对象呗订阅的时候,defer的函数参数就会被调用,逾期这个函数返回另外一个Observable

const observableFactory = () => Observable.of(1,2,3); const source$ = Observable.defer(observableFacatory); 合并类操作符

不少合并类操作符都有两种形式,既提供静态操作符,又提供实例操作符。

concat

concat可以将多个Observable的数据内容一次合并

const source1$ = Observable.of(1,2,3); const source2$ = Observable.of(4,5,6); const concated$ = source1$.concat(source2$); // 或者静态操作符 const concated$ = Observable.concat(source1$, source2$);

concat开始从下一个Observable抽取数据是发生在前一个Observable对象完结之后,所以参与到这个concat之中的Observable对象应该都能完结。如果一个Observable对象不完结,那排在后面的Observable对象永远没有上场的机会

// source1$不完结,永远轮不到source2$上场 const source1$ = Observable.interval(1000); const source2$ = Observable.of(1); const concated$ = source1$.concat(source2$); merge

先到先得快速通过
merge同样支持静态和实例形式的操作符

const Observable = Rx.Observable; const source1$ = Observable.timer(0, 1000).map(x => x + 'A'); const source2$ = Observable.timer(500, 1000).map(x => x + 'B'); const merged$ = Observable.merge(source1$, source2$); merged$.subscribe(console.log, null, () => console.log('complete'));

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzyxwy.html