RxJS(二)
晚上都加班,没有安排到学习,也没有安排到来总结分享,
昨天放假出去玩了一下下,哈哈
今天就在家学习学习,我在跟你们分享时候其实我自己也是又学习了一遍,哈哈
一、发出值之后进行操作 —— 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