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

在 RxJS 中，flatMapLatest 和 switchMap 操作符都是常用的转换操作符。它们可以帮助我们将一个高阶 Observable 转换为一个低阶 Observable，从而方便地处理复杂的异步数据流。

`flatMapLatest`

flatMapLatest 操作符用于处理当一个 Observable 中的数据流一直持续到另一个 Observable 产生时，只使用最新的 Observable。换言之，如果一个新的 Observable 产生时，之前已经产生的 Observable 还未结束，则忽略之前的 Observable，只使用最新的 Observable。

例如，我们可以用 flatMapLatest 操作符将一个点击事件流转换为一个 HTTP 请求流，并只处理最新的请求结果：

// javascriptcn.com 代码示例
import { fromEvent } from 'rxjs';
import { flatMapLatest } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

const button = document.querySelector('button');

fromEvent(button, 'click').pipe(
  flatMapLatest(() => ajax('/api/data'))
).subscribe((data) => {
  console.log(data.response);
});

在上面的示例中，点击事件流被转换为一个 HTTP 请求流，通过 flatMapLatest 操作符只使用最新的请求结果。这个操作符非常有用，可以帮助我们避免处理不必要的数据。

`switchMap`

switchMap 操作符则是用于在高阶 Observable 中只处理最新的 Observable 的。也就是说，如果在处理一个 Observable 的同时另一个 Observable 产生了，则只使用最新的 Observable，将之前的 Observable 中的数据流忽略掉。

例如，我们可用用 switchMap 操作符处理一个文本框中输入的流，并只处理最新的输入流：

// javascriptcn.com 代码示例
import { fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

const input = document.querySelector('input');

fromEvent(input, 'input').pipe(
  switchMap((event) => ajax(`/api/data?q=${(event.target as HTMLInputElement).value}`))
).subscribe((data) => {
  console.log(data.response);
});

在上面的示例中，我们用 switchMap 操作符将一个文本框中输入的流转换为一个 HTTP 请求流，并只处理最新的请求结果。这个操作符也非常有用，可以帮助我们避免处理过时的数据。

总结

flatMapLatest 和 switchMap 操作符都是非常有用的转换操作符，可以帮助我们处理复杂的异步数据流。它们都可以将一个高阶 Observable 转换为一个低阶 Observable，并只处理最新的 Observable。这种处理方式非常适用于处理用户输入、HTTP 请求等异步数据流。

不过，需要注意的是，在使用这两个操作符时要特别小心，避免出现数据污染和混淆的情况。在实际开发中，我们可以根据场景和需求选择合适的操作符，以便更好地处理数据流。

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