JavaScript RxJS mergeMap 的使用场景与注意事项

mergeMap 基础与别名说明

提示：

• flatMap 等同于 mergeMap。
• 若需确保同一时刻仅有一个内部订阅处于活动状态，应选用 switchMap。
• 若内部 observables 的发射与订阅顺序至关重要，请采用 concatMap。

mergeMap 的核心使用场景

mergeMap 适用于需要展平内部 observable 且需手动控制内部订阅数量的场景。

以 switchMap 为例，每次源发出新值时前一个内部订阅即完成，故任意时刻仅允许一个活动内部订阅。反观 mergeMap，它允许多个内部订阅同时激活。因此，mergeMap 的典型应用场景包括那些不应被取消的请求，此类请求通常被视为写入操作而非读取操作。

例如，在 SAP 电商云购物车中，不同行项目的金额增减操作可并行执行。

需注意的是，若写入操作必须保持顺序，则 concatMap 更为适宜，如数据库写操作。

内存泄漏风险与管理策略

因 mergeMap 同时维护多个活动内部订阅，长期存在的内部订阅可能导致内存泄漏。基础示例包括使用内部计时器或 DOM 事件流映射到可观察对象的情况。若仍希望使用 mergeMap，建议利用其他运算符（如 take 或 takeUntil）来管理内部订阅的完成。此外，也可通过 concurrent 参数限制同时活动的内部订阅数量。

mergeMap 代码示例解析

参考以下示例：

import { fromEvent, of } from 'rxjs';
import { mergeMap, delay } from 'rxjs/operators';
// faking network request for save
const saveLocation = location => {
  return of(location).pipe(delay(500));
};
// streams
const click$ = fromEvent(document, 'click');

click$
  .pipe(
    mergeMap((e: MouseEvent) => {
      return saveLocation({
        x: e.clientX,
        y: e.clientY,
        timestamp: Date.now()
      });
    })
  )
  // Saved! {x: 98, y: 170, ...}
  .subscribe(r => console.log('Saved!', r));

saveLocation 是一个函数，它将传入参数封装为 Observable，该 Observable 并非立即 emit 数据，而是延迟 500 毫秒后发出。

mergeMap 接收一个函数作为参数，该函数的输入参数为通过 pipe 链接至 mergeMap 的 Observable 中的元素，即 MouseEvent；project 返回的数据类型是一个新的 Observable，包含屏幕点击的 X 和 Y 坐标以及当前时间戳。

最终输出结果：

至此，关于 JavaScript Rxjs mergeMap 使用场合的介绍已完成，更多相关 JS Rxjs mergeMap 内容请查阅本站往期文章或继续浏览后续相关文章，感谢大家的支持！