RxJS 中的操作符 switchMap 和 exhaustMap 的使用详解-JavaScript中文网-JavaScript教程资源分享门户

在 RxJS 中，switchMap 和 exhaustMap 是常用的操作符。本文将详细介绍它们的使用方法，详细解释其作用和原理，并附上应用样例，帮助您更好地理解和应用这两个操作符。

switchMap

switchMap 是 RxJS 中最常用的操作符之一。它将一个 Observable 序列映射成一个新的 Observable 序列，并在新序列发出后自动取消该序列中当前正在发出的所有数据，只发出新序列的数据。即在新的 Observable 序列被订阅时，它会自动取消掉之前的 Observable 序列。

具体来说，switchMap 的作用是将一个 Observable 序列映射成一个新的 Observable 序列。它会在新序列发出后，自动取消当前序列中正在发出的所有数据，只发出新序列的数据。这个操作符非常适合处理一些异步操作，特别是当这些操作有可能返还一个新的异步数据流时。

import { of, interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// 执行异步操作函数
const asyncOperation = (value) =>
  new Promise((resolve) => setTimeout(() => resolve(`Async data for: ${value}`), 1000));

// 创建一个 Observable 序列
const source$ = of(1, 2, 3);

// switchMap 操作符映射 Observable 序列
const result$ = source$.pipe(
  switchMap((value) => asyncOperation(value))
);

// 输出结果
result$.subscribe(console.log);

执行结果：

Async data for: 3

在上面的例子中，我们将一个 Observable 序列映射成了一个新的 Observable 序列，并使用 switchMap 操作符对它进行操作。当发出新序列时，switchMap 自动取消先前的序列。

使用 switchMap 操作符时需要注意，如果某次请求还没有完成，就又发出了新的请求，旧的请求就会自动取消。

exhaustMap

exhaustMap 操作符也是 RxJS 中常用的操作符之一。它与 switchMap 类似，同样也是将一个 Observable 序列映射成一个新的 Observable 序列，但与 switchMap 不同的是，当多个源 Observable 序列同时到达时，exhaustMap 只会处理第一个源 Observable 序列，等处理完后再接着处理下一个。

具体来说，如果在一个 Observable 序列发出后，还未完成时，又有新的 Observable 序列要发出并映射，那么新的 Observable 序列将会被忽略并不发送直到之前的 Observable 序列完成。

import { interval } from 'rxjs';
import { exhaustMap, take } from 'rxjs/operators';

// 创建一个 Interval Observable 序列
const source$ = interval(1000).pipe(take(5));

// exhaustMap 操作符映射 Observable 序列
const result$ = source$.pipe(
  exhaustMap(() =>
    interval(500).pipe(take(3))
  )
);

// 输出结果
result$.subscribe(console.log);

执行结果：

0
1
2

在上面的例子中，我们使用 exhaustMap 操作符将一个 Observable 序列映射成了一个新的 Observable 序列，并在其每个值上执行异步操作。当源 Observable 序列发出后，新的 Observable 序列被映射到，但在第一个 Observable 序列没有完成之前，后面的源 Observable 序列将被忽略。

使用 exhaustMap 操作符需要注意的是，如果源 Observable 序列具有高频率，可能会发生如何现象：如果发射频率大于外部消费者所能处理的速度，这可能会导致内部 Observable 阻塞，无法发射新数据。如果存在此类问题，请考虑使用 switchMap 操作符和其他操作符。

总结

本文详细介绍了 RxJS 中的 switchMap 和 exhaustMap 操作符并提供了示例代码。switchMap 和 exhaustMap 都是非常常用的操作符，它们可以帮助我们快速映射序列并处理异步操作。当使用这两个操作符时，需要注意它们的区别和使用场景。这篇文章的内容详细、深入，相信读者读完后能够对这两个操作符有更深的理解，并能够更好地应用到实际开发中。

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

RxJS 中的操作符 switchMap 和 exhaustMap 的使用详解

switchMap

exhaustMap

总结

纠错反馈