RxJS 中的 switchMap 和 flatMapLatest 区别及使用场景

RxJS 是一种流式编程的 JavaScript 库，它提供了一种可观察对象的抽象概念，用于处理异步和事件驱动的程序。在 RxJS 中，switchMap 和 flatMapLatest 是两个常用的操作符，它们的作用是将一个可观察对象转换成另一个可观察对象。本文将详细介绍 switchMap 和 flatMapLatest 的区别和使用场景，并提供示例代码。

switchMap

switchMap 用于将一个可观察对象转换成另一个可观察对象，但是它会在新的可观察对象出现时立即取消之前的可观察对象订阅，只保留最新的可观察对象。这意味着，如果在 switchMap 中嵌套多个可观察对象，只有最后一个可观察对象的值会被发出，之前的值都会被忽略。

下面是一个使用 switchMap 的示例代码：

import { fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';

fromEvent(document, 'click')
  .pipe(
    switchMap(event => fromEvent(document, 'mousemove'))
  )
  .subscribe(event => console.log(event));

在这个示例中，我们使用 fromEvent 创建一个可观察对象，每当用户单击页面时，它就会发出一个点击事件。然后我们使用 switchMap 将这个点击事件转换成一个新的可观察对象，该可观察对象会在用户移动鼠标时发出鼠标移动事件。最后，我们订阅这个新的可观察对象，并将鼠标移动事件输出到控制台。

flatMapLatest

flatMapLatest 与 switchMap 类似，它也用于将一个可观察对象转换成另一个可观察对象，但是它不会立即取消之前的可观察对象订阅，而是等待新的可观察对象出现后，将之前的可观察对象取消订阅。这意味着，如果在 flatMapLatest 中嵌套多个可观察对象，每个可观察对象的值都会被发出，但是只有最新的可观察对象的值会被保留。

下面是一个使用 flatMapLatest 的示例代码：

import { fromEvent } from 'rxjs';
import { flatMapLatest } from 'rxjs/operators';

fromEvent(document, 'click')
  .pipe(
    flatMapLatest(event => fromEvent(document, 'mousemove'))
  )
  .subscribe(event => console.log(event));

在这个示例中，我们使用 fromEvent 创建一个可观察对象，每当用户单击页面时，它就会发出一个点击事件。然后我们使用 flatMapLatest 将这个点击事件转换成一个新的可观察对象，该可观察对象会在用户移动鼠标时发出鼠标移动事件。最后，我们订阅这个新的可观察对象，并将鼠标移动事件输出到控制台。

使用场景

switchMap 和 flatMapLatest 都是用于将一个可观察对象转换成另一个可观察对象，它们的区别在于如何处理之前的可观察对象。因此，选择使用哪个操作符取决于具体的应用场景。

如果你只关心最新的值，并且不需要之前的值，那么应该使用 switchMap。例如，在搜索框中输入关键字时，你可能会发出多个 HTTP 请求，但是只关心最后一个请求的结果。在这种情况下，使用 switchMap 可以避免不必要的网络请求。

如果你需要之前的值，并且希望它们都能被保留，那么应该使用 flatMapLatest。例如，在选择省份后，你可能需要根据省份的 ID 发出一些 HTTP 请求，但是你仍然需要保留之前的省份信息。在这种情况下，使用 flatMapLatest 可以确保每个省份的信息都能被保留。

总结

本文介绍了 RxJS 中的 switchMap 和 flatMapLatest 操作符的区别和使用场景，并提供了示例代码。虽然它们都用于将一个可观察对象转换成另一个可观察对象，但是它们的处理方式有所不同，因此在选择使用哪个操作符时应该根据具体的应用场景进行考虑。

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