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