RxJS 是现代前端开发中一个非常强大的库，它提供了一组丰富的操作符，用于实现各种响应式编程场景。其中，exhaustMap 操作符是一种非常重要的操作符，它能够帮助我们处理多个异步请求，避免出现并发请求的问题。本篇文章将对 RxJS 中的 exhaustMap 操作符的用法进行详细讲解，并给出实例示意，帮助读者更加深入地理解如何使用 exhaustMap 来解决实际问题。
基本概念
exhaustMap 操作符可以将一个上游（observable）的值映射成一个新的 observable，并忽略同时发起的任何新 observable，直到它完成。也就是说，在 exhaustMap 产生的内部 observable 完成之前，所有新的源 observable 都会被忽略。这样，我们可以通过使用 exhaustMap 来避免同时发起多个异步请求的问题。
exhaustMap 操作符的基本用法如下：
exhaustMap(project: Function<ObservableInput>, resultSelector: Function(projectValue: any, sourceValue: T))
- project：一个函数，用于将源 observable 产生的值映射成一个新的 observable。
- resultSelector：一个可选的函数，用于处理映射后的 observable 和源 observable 产生的值，返回一个新的结果。
示例演示
假如我们有一个场景，需要向服务器发起一批请求。如果我们直接使用 switchMap 或 mergeMap 时，就可能出现并发请求的问题，导致服务器压力过大。这时候，我们就可以使用 exhaustMap 来解决这个问题。
以下是一个基本的示例代码：
-- -------------------- ---- ------- ------ - --- -------- - ---- ------- ------ - ----------- ---- - ---- ----------------- ----- ---- - ----------------------------- ----- ---- - ---------------------------- ----------------------- -- ----------------- ----- -- ------------------- --- -- ----------------- -- -- ----------------------- ------- ----------- --
上面代码中，我们创建了两个 observable obs1 和 obs2：obs1 每秒钟发出一次值，并且只发出 5 次；obs2 每 0.5 秒钟发出一次值，并且只发出 2 次。在 obs1 发出值的时候，我们使用 exhaustMap 以 obs1 的值为参数，将其与 obs2 联接起来。
由于 obs1 每秒钟只发出一次值，因此在前两秒钟内，只会将 obs1 的第一个值与 obs2 联接起来，并发起异步请求。此时，如果再次发出 obs1 的值，由于前一个请求还在等待服务器响应，所以这个新的请求不会被执行。只有在第一个请求返回结果之后，新的请求才会被执行。
因此，使用 exhaustMap 可以让我们进行流量控制，保证服务器的正常运行。
实际应用
假如我们有这样一个场景：用户可以同时编辑多个表单，每个表单都对应一个异步请求，请求的结果将会影响到整个应用的状态。在用户提交表单的时候，我们需要通过 exhaustMap 保证只有当前目标表单的请求被发起，并等待其结果返回；在结果返回之前，其它表单的请求将被忽略。
以下是完整的代码实现：
-- -------------------- ---- -------
------ - ---------- -- - ---- -------
------ - ----------- ------ --- - ---- -----------------
----- ------ - -----------------------------------
----------------- --------
------
------------- -- -
----- -------- - --------------------- --
---------------------------------
--
-- --------
----- ----- - ----------------
----- ---- -- ---- - --------------- -- ----- - -----
---------
--
------ ------
--
-
----------------- -- -
--------------------
---上面代码中，我们通过从页面上选择所有的 input 标签，并使用 fromEvent 将其转换为一个 observable，监听 input 事件。
当用户输入时，我们使用 exhaustMap 将当前输入值作为参数，将其与其它 input 元素形成的 observable 组合起来。在这个例子中，我们模拟了一个异步请求，每个输入框的值将会等待 1 秒钟之后才返回结果。
最后，我们依次执行所有请求，并通过 subscribe 订阅它，以便在结果返回时处理结果。
总结
通过本文的讲解，我们深入了解了 RxJS 中的 exhaustMap 操作符的基本概念和用法。exhaustMap 可以让我们处理多个异步请求，避免并发请求导致的问题。同时，我们也给出了一个示例代码，演示了如何在实际应用中使用 exhaustMap 实现流量控制的功能。希望本文可以帮助读者更好地应用 RxJS 中的各种操作符，更快地开发出高质量的前端应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bfa1a39e06631ab9c266ee