RxJS 中的 mergeMap 和 concatMap 区别解析

在RxJS中，mergeMap和concatMap是两个常见的操作符，它们通常用于将高阶可观察源（Observable source）转换为一些其他的值，这些值可以是另一个可观察源，也可以是普通的值。虽然这两个操作符都实现了这样的功能，但它们之间存在一些明显的区别和适用场景。

mergeMap

mergeMap操作符将每个项目转换成一个可观察源，并订阅结果可观察源，然后将其合并成一个单独的可观察对象。因此，该操作符会立即发射来自所有源的所有值，并将它们交错在一起。

下面是一个使用mergeMap的示例：

import { of } from 'rxjs';
import { mergeMap, delay } from 'rxjs/operators';

const source = of(1, 2, 3);

source.pipe(
  mergeMap(val => of(`Delayed by: ${val}ms`).pipe(delay(val)))
).subscribe(console.log);

在上面的代码中，我们先创建一个可观察源source，其中有三个数字1、2、3。然后我们使用mergeMap操作符将每个数字转换成一个可观察源。每个可观察源都会延迟相应的毫秒数，以便能够看到它们的发射顺序。最后，我们通过订阅这个转换后的可观察源来打印输出结果。

运行上述代码将得到以下输出：

Delayed by: 1ms
Delayed by: 2ms
Delayed by: 3ms

由于mergeMap会立即发射所有值，因此它非常适合处理并发请求或同时处理多个事件的情况。

concatMap

与mergeMap不同，concatMap操作符会按顺序发射每个源的值，并等待前一个可观察对象完成（complete）之后再接着发射下一个可观察源的值。因此，concatMap的输出顺序总是与输入顺序相同。

以下是使用concatMap的示例：

import { of } from 'rxjs';
import { concatMap, delay } from 'rxjs/operators';

const source = of(1, 2, 3);

source.pipe(
  concatMap(val => of(`Delayed by: ${val}ms`).pipe(delay(val)))
).subscribe(console.log);

在上面的代码中，我们使用了与mergeMap类似的方式来创建可观察源source和延迟每个数字的可观察源。但是我们现在使用的是concatMap操作符。它的作用是依次订阅每个可观察源，等待它们依次完成，然后才发射下一个源的值。

运行上述代码将得到以下输出：

Delayed by: 1ms
Delayed by: 2ms
Delayed by: 3ms

可以看到，concatMap操作符保证了输出值的顺序与输入值的顺序相同。

区别解析

通过以上示例，我们可以看出mergeMap和concatMap之间的主要区别在于它们发射值的方式和结果的排序方式是不同的。总结一下：

• mergeMap会立即发射来自每个源的所有值，并将它们交错起来。适用于处理并行请求或同时处理多个事件的情况。
• concatMap会按顺序发射每个源的值，并等待前一个源完成（complete）后才会发送下一个源的值。适用于需要顺序处理的场景。

因此，在不同的实

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651ac9b795b1f8cacd299c6c