RxJS 是一款强大的 JavaScript 函数库，它提供了许多用于处理异步数据流的操作符，其中包括 switchMap 和 exhaustMap 两种操作符。这两种操作符都可以用于处理 Observable 流的转换，但在实际应用中，它们的效果有所不同。本文将详细介绍 switchMap 和 exhaustMap 操作符的用法和区别，帮助读者更好地理解如何使用它们来优化前端代码。
switchMap 操作符
switchMap 操作符可以让我们在处理 Observable 流时，将一个 Observable 转换成另一个 Observable。它的基本用法如下：
import { switchMap } from 'rxjs/operators';
Observable1.pipe(
switchMap(() => Observable2)
).subscribe();以上代码表示：在处理 Observable1 的数据流时，将 Observable1 转换成 Observable2，然后继续处理 Observable2 的数据流。可以看出，switchMap 操作符非常容易理解和使用，使用它可以将嵌套的异步操作转换为串行的异步操作，从而避免了传统的回调地狱。
下面是一个 switchMap 操作符的例子。我们模拟一个用户搜索的场景，假设在用户输入框中输入一个关键字，我们的程序会调用一个搜索接口，返回相关的搜索结果。在实际操作过程中，我们不希望每次用户输入一个关键字就发起一次新的搜索请求，因为这样可能会导致性能问题。为了避免这个问题，我们可以使用 switchMap 操作符来避免重复搜索操作：
-- -------------------- ---- -------
------ - --- --------- - ---- -------
------ - ---- ---------- ------------ - ---- -----------------
------ - ---- - ---- ------------
----- ----- - ------------------------------- -- -----------------
----- ------- - ---------------------------------- -- ------------
---------------- --------------
------------------
--------- -- ------------- -- --------------------------------
--------------- -- -
-- ------------- --- -- -
------ -------
-
------ --------------------------------------------------------------------
------------ -- ----------------
--
---
----------------- -- -
----------------- - ---
--- ------ ---- -- ------ -
----- ---- - -----------------------------
-------------- - -----------
--------------------------
-
---以上代码中，我们使用 fromEvent 操作符来创建一个可观察对象，监听输入框的输入事件。使用 debounceTime 操作符来限制输入框的输入频率，防止用户的频繁输入导致搜索接口被反复调用。使用 map 操作符来将用户输入的字符串转化为需要搜索的关键字。使用 switchMap 操作符来实现异步的搜索操作，这样当用户输入一个新的关键字时会取消上一个搜索请求，并重新发起一次新的搜索请求。最后，我们在订阅回调函数中展示搜索结果。
exhaustMap 操作符
exhaustMap 操作符也可以用于将一个 Observable 转换为另一个 Observable。与 switchMap 不同的是，exhaustMap 操作符有一个缓冲机制，它会忽略任何新的 Observable，直到第一个 Observable 完成。具体用法如下：
import { exhaustMap } from 'rxjs/operators';
Observable1.pipe(
exhaustMap(() => Observable2)
).subscribe();以上代码表示，当 Observable1 发出值时，如果当前没有其他 Observable2 在运行，则使用 Observable2，否则忽略 Observable1。
下面是一个使用 exhaustMap 操作符的例子。假设我们要实现一个点击按钮发送 Ajax 请求的功能，这时候必须要避免多次点击按钮，导致多次发送 Ajax 请求的问题。为了避免这种情况的发生，我们可以使用 exhaustMap 操作符来限制按钮的点击：
-- -------------------- ---- ------- ------ - --------- - ---- ------- ------ - ----------- --- - ---- ----------------- ------ - ---- - ---- ------------ ----- ------ - --------------------------------- -- ------------------ ----------------- -------------- ------ -- ------------------- ----------- ------------- -- ------------------------------------------------------ -------------------- -- - --------------------- ---------- ---------- ---
以上代码中，我们使用 fromEvent 操作符来创建一个可观察对象，监听按钮的点击事件。在 exhaustMap 函数中，我们返回了一个 Ajax 请求 Observable，它会发出一个 Github 用户的详细信息。由于 exhaustMap 操作符有缓冲机制，因此如果用户多次点击按钮，只有第一次点击会发起 Ajax 请求，后续的点击会被忽略。
switchMap 和 exhaustMap 的区别
switchMap 和 exhaustMap 两种操作符都可以用于处理 Observable 流的转换，但它们之间有一些差异，以下是它们的主要区别：
- switchMap 操作符可以在每次新的 Observable 到来时取消上一次的操作，因此可以避免重复操作的问题；而 exhaustMap 操作符不会取消之前的操作，除非它完成后才会开始处理下一个新的 Observable。
- switchMap 操作符可以处理任意数量和任意类型的 Observable；而 exhaustMap 操作符只会处理一个 Observable，其它 Observable 会被忽略。
总结
在本文中，我们详细了解了 RxJS 的 switchMap 和 exhaustMap 操作符，这两种操作符可以用于处理异步数据流的转换。虽然它们的用法相似，但它们之间的区别很大，因此在实际应用中需要合理选择。总的来说，switchMap 更为灵活，它可以取消之前的操作，并可以处理任意数量和类型的 Observable；而 exhaustMap 则更简单，它只会处理一个 Observable，但执行效率比较高。在实际应用中，我们需要根据不同的场景来选择使用哪种操作符，以达到最佳的性能和效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec63faf6b2d6eab36aa0d6