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弹珠图

merge后的源 Observable 的值立即显示在输出中。直到所有merge的 Observable 完成后，结果 Observable 才会完成。

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

 

mergeMap Operator

mergeMap弹珠图

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 ...      
    );

日志信息

如图所示，请求是并行发生的，在这种情况下是一个错误！在重负载下，这些请求可能会被乱序处理。