RxJS 中的 mergeMap 和 switchMap 操作符的区别-JavaScript中文网-JavaScript教程资源分享门户

RxJS 是 JavaScript 中一种流式编程的库，它可以让开发者更加高效地进行事件编程。在 RxJS 中，有两个重要的操作符 mergeMap 和 switchMap，这两个操作符非常类似，但是它们的应用场景和效果是不同的。在本文中，我们将详细探讨这两个操作符的区别，并提供示例代码，以让读者更好地理解其应用方法。

mergeMap

mergeMap 操作符的作用是将一个 Observable 中的每个元素转换成一个新的 Observable，然后将这些 Observable 合并成一个 Observable 。可以将 mergeMap 操作符看作是 Observable 的 flattenMap 版本。它的语法如下：

source$.pipe(
  mergeMap((value) => {
    // ...
  })
);

其中，source$ 是一个 Observable，value 是这个 Observable 发出的每个值。在 mergeMap 中，对于每个值，我们可以返回一个新的 Observable，然后使用 merge 运算符将这些 Observable 合并到一起，形成一个新的 Observable。

mergeMap 的实际效果可以用如下图所示的代码示例来说明:

// javascriptcn.com 代码示例
const { fromEvent } = rxjs;
const { map, mergeMap } = rxjs.operators;

const source$ = fromEvent(document, 'click');

const result$ = source$.pipe(
  mergeMap((event) => {
    return fromEvent(document, 'mousemove').pipe(
      map((motionEvent) => ({
        x: motionEvent.clientX,
        y: event.clientY,
      }))
    );
  })
);

result$.subscribe((value) => {
  console.log(value); // {x: ..., y: ...}
});

在这个示例中，我们会监视整个文档的 click 事件。当发生 click 事件时，将会在整个文档内部寻找 mousemove 事件，并将 mousemove 事件转换成一个包含了 x 和 y 坐标的对象。由于 mergeMap 操作符的存在，我们可以轻松处理从两个不同的 Observable 中获取的数据。

switchMap

switchMap 操作符的行为类似于 mergeMap，不过它的区别在于，如果它接收到一个新的 Observable 并在此之前已经有一个活动的 Observable，那么它将取消这个活动的 Observable，并用新的 Observable 取代它。简单来说，switchMap 取消了之前的 Observable，并开始一个新的 Observable。switchMap 的语法如下：

source$.pipe(
  switchMap((value) => {
    // ...
  })
);

switchMap 中，source$ 是一个 Observable，value 是这个 Observable 发出的每个值。在 switchMap 中，对于每个值，我们可以返回一个新的 Observable，并用它来代替之前已存在的 Observable。

对于 switchMap，我们可以使用以下示例代码来更好地理解其操作原理：

// javascriptcn.com 代码示例
const { fromEvent } = rxjs;
const { map, switchMap } = rxjs.operators;

const source$ = fromEvent(document, 'click');

const result$ = source$.pipe(
  switchMap((event) => {
    return fromEvent(document, 'mousemove').pipe(
      map((motionEvent) => ({
        x: motionEvent.clientX,
        y: event.clientY,
      }))
    );
  })
);

result$.subscribe((value) => {
  console.log(value); // {x: ..., y: ...}
});

跟 mergeMap 示范代码相比，这段代码只是将 mergeMap 替换为 switchMap。但由于 switchMap 的行为，当我们在页面中点击鼠标时，如果鼠标移动，我们会得到鼠标位置的数据，但是如果我们在前一个 mousemove 事件完成之前再次点击鼠标，我们会停止前一个 mousemove 事件，并开始一个全新的 mousemove 事件，这意味着我们必须收到新的 x 和 y 坐标。

MergeMap 和 SwitchMap 区别总结

mergeMap 是用于将 Observable 转换成另一个 Observable 并将结果合并的运算符，然后将其发送到一个输出 Observable 中。这意味着合并过程是同时进行的，因此任何前面一个返回的 Observable 的值都不保证会在后面 Observable 的值之前传递。
switchMap 在输入 Observable 中选择一个新 Observable 来订阅，并立即开始发出该 Observable 发出的值，而取消以前被订阅的 Observable，因此只有最后一个值是真正的“激活”的响应，而没有并发。

结论

mergeMap 和 switchMap 是 RxJS 中值得关注的两个操作符。它们很容易混淆，但它们的行为不同。如何选择使用这两者之一取决于您的用例。如果您想同时处理多个“内部” Observable 的值，请使用 mergeMap。如果您想确保只有最新的 Observable 的值通过 pipeline，请使用 switchMap。这些操作符可以提高您的代码效率和维护性，这对于一个网页应用程序来说是至关重要的。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6531dce47d4982a6eb3daa48