揭秘RxJS拉平策略：5张弹珠图彻底搞懂MergeMap、SwitchMap、ConcatMap、ExhaustMap

前端

2024-02-14 06:40:07

理解RxJS的操作符确实需要一番较劲，尤其是最常见的几种map操作符。本文将深入浅出地解释mergeMap、switchMap、concatMap和exhaustMap这四种操作符，让大家不再为RxJS的拉平策略所困扰。

弹珠图：直观理解拉平策略

为了直观地展示RxJS的拉平策略，我们引入了一系列"弹珠图"。弹珠代表流中的事件，弹珠流代表操作符处理后的结果。

1. MergeMap：并行弹射

MergeMap就像一个并行的弹珠发射器。当它收到一个弹珠时，它会立刻发射出多个弹珠，同时继续接收并处理源流中的下一个弹珠。

MergeMap弹珠图

2. SwitchMap：切换通道

SwitchMap就像一个弹道切换器。当它收到一个弹珠时，它会关闭当前的弹道，打开一个新的弹道，并仅处理新弹道上的弹珠。

SwitchMap弹珠图

3. ConcatMap：有序衔接

ConcatMap就像一个有序的弹珠连接器。它按顺序处理弹珠，当前弹珠处理完毕后才会处理下一个弹珠。

ConcatMap弹珠图

4. ExhaustMap：独占排队

ExhaustMap就像一个独占的弹珠排队机。它一次只处理一个弹珠，只有当前弹珠处理完毕后，它才会从源流中获取下一个弹珠。

ExhaustMap弹珠图

5. 弹珠图对比

通过弹珠图对比，我们可以清楚地看出这四种操作符在拉平策略上的异同：

操作符	并行度	顺序	独占性
MergeMap	高	无	否
SwitchMap	低	无	是
ConcatMap	低	是	否
ExhaustMap	低	是	是

选择合适的操作符

根据不同的业务场景，选择合适的操作符至关重要：

并行处理： MergeMap
只关注最新流： SwitchMap
保证处理顺序： ConcatMap
独占处理： ExhaustMap

深入浅出，举一反三

我们以一个实际案例为例，进一步理解这四种操作符的使用场景：

// 获取用户列表
const users$ = of(1, 2, 3);

// 并行获取用户详细信息
const userDetails$ = users$.pipe(
  mergeMap(id => http.get(`/users/${id}`)
);

// 依次获取用户详细信息
const userDetails$ = users$.pipe(
  concatMap(id => http.get(`/users/${id}`)
);

// 仅获取最新用户的详细信息
const userDetails$ = users$.pipe(
  switchMap(id => http.get(`/users/${id}`)
);

// 逐一排队获取用户详细信息
const userDetails$ = users$.pipe(
  exhaustMap(id => http.get(`/users/${id}`)
);