RxJS(二)

2020-04-05  本文已影响0人  蒋小花_4b6c

晚上都加班,没有安排到学习,也没有安排到来总结分享,

昨天放假出去玩了一下下,哈哈

今天就在家学习学习,我在跟你们分享时候其实我自己也是又学习了一遍,哈哈

一、发出值之后进行操作 —— concat

1.concat

第一个执行完毕之后再执行第二个

就像排队买早餐一样,第一个人买完就到第二个人买早餐

const sourceOne = Rx.Observables.of(1, 2, 3);

const sourceTwo = Rx.Observables.of(4, 5, 6);

const example = sourceOne.concat(sourceTwo);

const example = Rx.Observable.concat(sourceOne, sourceTwo);

// 1, 2, 3, 4, 5, 6

// sourceOne和sourceTwo连接,发出 sourceOne之后发出 sourceTwo 

Q: 如果希望第二个源Observable是三秒之后发出,那末应该怎末处理呢?

可以使用timer(),    interval(),    delay()

const source1 = Rx.Observable.timer(3000);

const source2 = Rx.Observable.interval(3000);

const source3 = Rx.Observable.delay(3000);

// 在这里还可以把第一个Observable变成延迟三秒,这样第二个就是3秒后发出

const delay = sourceOne.delay(3000);

const example2 = delay.concat(sourceTwo);

const sub2 = example2.subscribe(val => console.log('val:', val) );

2.concatAll

前一个完成时订阅下一个

const reource = Rx.Observables.interval(2000);

const example = reource

.map(val => Rx.Observables.of(val + 10) )

.concatAll(); // 搜集所有发出的值,然后订阅

const subscribe = example.subscribe(

    val => console.log(val) );

concat和concatAll都是相同的功能,上一个完成时订阅下一个,

不同之处再于concat只能执行两个,

而concatAll可以执行任意多个。

const ob1 = Rx.Observables.interval(1000).take(3);

const ob2 = Rx.Observables.interval(2000).take(2);

const ob3 = Rx.Observables.interval(200).take(1);

const example = Rx.Observables.concatAll(ob1, ob2, ob3);

// const example = Rx.Observables.concat(ob1, ob2);

const subscribe = Rx.subscribe.subscribe( val => console.log(val) );

二、发出值之后进行操作 —— merge

1.merge  

将多个源Observable转换成一个observable

const ob1 = Rx.Observables.interval(1000);

const ob2 = Rx.Observables.interval(1000);

const ob3 = Rx.Observables.interval(1000);

const example = Rx.Observables.merge(

    ob1.mapTo('one'),

    ob2.mapTo('two'),

    ob3.mapTo('three')

);

const subscribe = Rx.Observables.subscribe( val => console.log(val) );

// 'one', 'two', 'three'

如果只有两个合并成一个的话,可以这样:

const example2 = ob1.merge(ob2);

2.mergeAll

收集订阅所有Observable

const myPromise = val => {

    new Promise(resolve => {

        setTimeout(() => {

            resolve(`result:${val}`);     

        }, 2000);

    });

};

const source = Rx.Observables.of(1, 2, 3);

const example = source

.map(

    val => myPromise(val)

)

.mergeAll();

const subscribe = example.subscribe( val => console.log(val) );

result: 1     result: 2    result: 3

3.maergeMap

映射成Observable,并发出值

* flatMap = mergeMap

官方解释是这样的:

当想要打平内部 observable 并⼿动控制内部订阅数量时, 此操作符是最 适合的。

例如,当使⽤ switchMap 时,源 observable 发出值时,每个内部订阅 都是完成的,只允许存在⼀个活动的内部订阅。与此相反, mergeMap 允许同⼀时间存在多个活动的内部订阅。正因为如此,  mergeMap 最常⻅的⽤例便是不会被取消的请求,可以将其考虑成写,⽽不是读。注意如 果需要考虑顺序的话,  concatMap 会是更好的选择。

 注意,因为 mergeMap 同时维护多个活动的内部订阅,由于这些⻓期活 动的内部订阅,所以是有可能产⽣内存泄露的。举个例⼦,如果你将 observable 映射成内部的定时器或 DOM 事件流。在这些案例中,如果你 仍然想⽤ mergeMap 的话,你应该利⽤另⼀个操作符来管理内部订阅的 完成,⽐如 take 或 takeUntil 。你还可以使⽤ concurrent 参数 来限制活动的内部订阅的数量,

const source = Rx.Observable.of('Hello');

const example = source.mergeMap(val => Rx.Observable.of(`${ val} World!`));

使用mergeMap手动操作其发出的值

const subscribe = example.subscribe( val => console.log(val) );

// 输出: 'Hello World!'

concatMap和mergeMap的区别:

const mergeMapSub = Rx.Observable.of(2000, 1000)

.concatMap(v => Rx.Observable.of(v).delay(v))

.subscribe(v => console.log('concatMap:', v));

// concatMap: 2000, concatMap: 1000

const mergeMapSub = Rx.Observable.of(2000, 1000)

.mergeMap(v => Rx.Observable.of(v).delay(v))

.subscribe(v => console.log('mergeMap:', v));

// mergeMap: 1000, mergeMap: 2000 

据说世界上两个人出生年月日相同的概率只有0.92%,如果你遇见了这个人 那一定是特别的缘分。。。

上一篇下一篇

猜你喜欢

热点阅读