发布于 1个月前

RxJs高阶运算——mergeMap

上一节我们介绍了第一个高阶运算concatMap,今天我们开始学习第二个高阶运算mergeMap。

同样的道理,为了掌握mergeMap,我们先了解merge。

mergeMap动态图

我们知道concatMap是顺序执行,有的时候我们可能需要并行执行,此时我们就要用到merge.

Observable Merge

代码举例

onst series1$ = interval(1000).pipe(map(val => val*10));

const series2$ = interval(1000).pipe(map(val => val*100));

const result$ = merge(series1$, series2$);

result$.subscribe(console.log);

日志信息

可以看出, merge的源 Observable 的值在发出后立即显示在结果 Observable 中。如果merge的 Observable 之一完成,merge 将继续发出其他 Observable 的值,因为它们随着时间的推移到达。请注意,如果源 Observables 完成,合并仍将以相同的方式工作。

我们看看弹珠图:

merge弹珠图

<figure class="image">RxJs merge Example</figure>merge后的源 Observable 的值立即显示在输出中。直到所有merge的 Observable 完成后,结果 Observable 才会完成。

现在我们了解了合并策略,让我们看看它如何在高阶 Observable 映射的上下文中使用。

mergeMap Operator

mergeMap弹珠图

<figure class="image">RxJs mergeMap Example</figure>### mergeMap分析

1、源 Observable 的每个值仍然被映射到内部 Observable 中,就像 concatMap 的情况一样

2、和 concatMap 一样,内部 Observable 也被 mergeMap 订阅

3、当内部 Observable 发出新值时,它们会立即反映在输出 Observable 中

4、但与 concatMap 不同的是,在 mergeMap 的情况下,我们不必等待前一个内部 Observable 完成才能触发下一个内部 Observable

5、这意味着使用 mergeMap(与 concatMap 不同)我们可以让多个内部 Observables 随时间重叠,并行发出值,就像我们在图片中以红色突出显示的那样

代码举例

this.form.valueChanges
    .pipe(
        mergeMap(formValue => 
                 this.http.put(`/api/course/${courseId}`, 
                               formValue))
    )
    .subscribe(
       saveResult =>  ... handle successful save ...,
        err => ... handle save error ...      
    );

日志信息

<figure class="image">RxJs mergeMap Example</figure>如图所示,请求是并行发生的,在这种情况下是一个错误!在重负载下,这些请求可能会被乱序处理。

©2020 edoou.com   京ICP备16001874号-3