美文网首页
RxJS(二)

RxJS(二)

作者: 蒋小花_4b6c | 来源:发表于2020-04-05 10:35 被阅读0次

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

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

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

    一、发出值之后进行操作 —— 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%,如果你遇见了这个人 那一定是特别的缘分。。。

    相关文章

      网友评论

          本文标题:RxJS(二)

          本文链接:https://www.haomeiwen.com/subject/yrmyphtx.html