RxJS 是一种流式编程库，它提供了各种操作符，可以极大地简化异步编程。在 RxJS 中，switchMap 和 exhaustMap 是两个非常常用的操作符。本文将详细介绍它们的异同，以及在实际开发中如何应用它们。
switchMap
switchMap 可以将一个可观察对象映射成另一个可观察对象，并且只会输出最新的映射结果。也就是说，如果新的源可观察对象到来时，旧的可观察对象仍在发出数据，则会取消旧的可观察对象的订阅并输出新的数据。
下面是一个简单的示例：
-- -------------------- ---- -------
----- - --------- - - -----
----- - ---------- --- - - ---------------
----- ------ - ----------------------------------
----------------- --------
------
------------ -- -
------ -------------------------
---
------------ -- ----------------
-
----------------- -- ---------------------在这个示例中，我们在按钮点击事件中调用了一个 API，并将结果映射成了一个 JSON 对象。如果用户在响应返回之前连续点击了多次按钮，则只有最后一次订阅的结果会被输出。
exhaustMap
exhaustMap 类似于 switchMap，也可以将一个可观察对象映射成另一个可观察对象。但是，当源可观察对象到来时，如果当前正在执行的映射仍然存在，则会忽略新的映射。也就是说，在上一个映射输出之前，任何新的源值都不会被映射。
下面是一个简单的示例：
-- -------------------- ---- -------
----- - --------- - - -----
----- - ----------- ---- ----- - - ---------------
----- ------ - ----------------------------------
----------------- --------
------
------------- -- -
------ ------------------------------
-----------
--
---
------------ -- ----------------
-
----------------- -- ---------------------在这个示例中，我们延迟了映射，以模拟一个较慢的 API 调用。如果用户在延迟期间连续点击了多次按钮，则只有第一个映射会被执行，并且不会考虑其他源值。
异同比较
switchMap 和 exhaustMap 的共同点是它们都可以将一个可观察对象映射成另一个可观察对象并输出结果。但是，它们的行为方式略有不同：
- switchMap 会取消旧的映射（如果它们仍在输出）并输出新的映射，而 exhaustMap 会忽略新的源值，直到当前映射完成。
- switchMap 适用于许多 UI 操作，例如搜索栏或下拉菜单，因为它可以很容易地取消旧的请求并只处理最新的结果。而 exhaustMap 则适用于需要确保顺序的操作，例如只能进行单个 HTTP 请求的身份验证操作。
实际应用
在实际应用中，我们应该根据具体的需求来选择使用 switchMap 还是 exhaustMap。对于每个操作，我们应该考虑以下问题：
- 我们是否需要确保顺序？
- 我们需要在新的源值到达时取消旧的映射吗？
如果我们需要确保顺序，则应该使用 exhaustMap。否则，我们就应该选择 switchMap。
例如，针对搜索栏的实际应用，我们可以使用 switchMap 以确保只处理最新的搜索结果：
-- -------------------- ---- -------
----- - --------- - - -----
----- - ---------- ---- ------------ - - ---------------
----- ----- - ---------------------------------
---------------- --------
------
------------------
--------------- -- -
----- ----- - --------------------------
-- ------ --- --- -
------ --------------------------
-
------ --------------------------------------
---
------------ -- ----------------
-
----------------- -- ---------------------需要注意的是，我们添加了一个 debounceTime 操作符以避免在用户打字时连续发出多个请求。这是引入 RxJS 的另一个好处：可以使用各种操作符来操作数据流并简化代码。
总结
switchMap 和 exhaustMap 是 RxJS 中非常常见的操作符，可以在处理异步任务时简化代码。这两个操作符的行为方式略有不同，我们应该选择正确的操作符来适应特定的需求。在实际开发中，我们应该考虑确保顺序和是否需要取消旧的映射。使用 RxJS，我们可以轻松地实现这些复杂的异步操作，并简化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ef449968c7c53b0116ebf