RxJS：剖析 map、mergeMap 和 switchMap

2023-10-08 14:50:03

在响应式编程的海洋中航行时，RxJS 作为一艘强大的船只脱颖而出。它提供了一系列运算符，可以轻松处理异步数据流。其中，map、mergeMap 和 switchMap 是三个尤为重要的运算符，它们在塑造和转换数据方面发挥着至关重要的作用。

了解 map：优雅地变换数据

map 运算符就像一个魔法棒，它可以在数据流过时对其进行逐一转换。它接受一个转换函数，并将其应用于每个元素，返回一个新的可观察序列。map 的魅力在于它的简单性和效率，它可以在不改变原始序列的情况下创建变换后的数据。

// 原始可观察序列
const numbers = of(1, 2, 3, 4, 5);

// 使用 map 转换数据
const doubledNumbers = numbers.pipe(
  map((num) => num * 2)
);

// 输出：[2, 4, 6, 8, 10]

探索 mergeMap：并行处理异步请求

mergeMap 运算符将 map 的功能提升到了一个新的水平。它允许异步数据流内的元素被并行处理。mergeMap 接受一个返回可观察序列的函数，并将其应用于每个元素。它将所有内部可观察序列合并成一个新的可观察序列，保留它们的顺序。

// 发出 HTTP 请求的可观察序列
const requests = of('user1', 'user2', 'user3');

// 使用 mergeMap 并行处理请求
const userProfiles = requests.pipe(
  mergeMap((userId) => http.get(`/users/${userId}`))
);

// 输出：包含所有用户个人资料的可观察序列

深入 switchMap：切换到最新的可观察序列

switchMap 运算符与 mergeMap 类似，但有一个关键区别。当使用 switchMap 时，它会取消任何未决的内部可观察序列，只关注最新的一个。这对于处理只对最新数据感兴趣的情况非常有用。

// 点击事件的可观察序列
const clicks = fromEvent(document, 'click');

// 使用 switchMap 切换到最新的点击事件
const latestClick = clicks.pipe(
  switchMap((event) => timer(1000).pipe(mapTo(event)))
);

// 输出：每 1 秒发出最新的点击事件

联系与区别

map、mergeMap 和 switchMap 都属于 RxJS 中转换运算符的家族。它们在数据流操作方面发挥着至关重要的作用，但其联系和区别如下：

联系： 它们都用于转换数据流中的元素，并且不会改变原始序列。
区别：
- map： 逐一转换元素，不会影响序列的顺序。
- mergeMap： 并行处理元素，合并内部可观察序列并保留顺序。
- switchMap： 切换到最新的可观察序列，取消未决的内部可观察序列。