前言
在 Web 开发中，我们经常需要处理异步操作，例如从后端获取数据、用户输入、定时器等等。RxJS 是一个强大的响应式编程库，它提供了许多操作符来处理这些异步操作。在 RxJS 中，exhaustMap 操作符是一个非常有用的操作符，本文将介绍 exhaustMap 操作符的作用及实际应用。
exhaustMap 操作符
exhaustMap 操作符将源 Observable 中的每个值映射成一个内部 Observable，然后只发出内部 Observable 的值，而忽略源 Observable 的其他值，直到内部 Observable 完成。如果在内部 Observable 完成之前，源 Observable 发出了另一个值，那么这个值将被忽略，直到内部 Observable 完成。
下面是 exhaustMap 操作符的示意图：
源 Observable：--a--b--c--d--e---> 内部 Observable：x-------y---z--> 输出 Observable：---x-------y-->
在上面的示意图中，源 Observable 发出了五个值 a、b、c、d、e，每个值都被映射成内部 Observable，内部 Observable 分别发出了 x、y、z。由于内部 Observable 在发出 y 之前已经完成了，因此源 Observable 的值 d 和 e 被忽略了。
实际应用
exhaustMap 操作符最常用的场景是处理用户输入。例如，当用户点击按钮时，我们需要从后端获取数据并显示在页面上。如果用户在数据未加载完成时多次点击按钮，我们希望忽略这些点击事件，直到前一个数据加载完成后再处理下一个点击事件。这时可以使用 exhaustMap 操作符。
下面是一个使用 exhaustMap 操作符的示例代码：
-- -------------------- ---- -------
------ - ---------- -- - ---- -------
------ - ----------- ----- - ---- -----------------
----- ------ - ----------------------------------
----- ------ - ----------------------------------
----------------- --------
------
------------- -- -
------ -------- ---------------------------
--
-
----------------- -- -
------------------ - -----
---在上面的代码中，我们从按钮的 click 事件创建了一个 Observable，然后使用 exhaustMap 操作符将每个 click 事件映射成一个内部 Observable。内部 Observable 通过 of 操作符创建，表示数据已经加载完成。为了模拟数据加载的过程，我们使用 delay 操作符将数据的发射延迟了 3 秒。最后，我们订阅输出 Observable，将数据显示在页面上。
运行上面的代码，当用户点击按钮时，会有一个 3 秒的延迟，然后显示 Data loaded。如果用户在这 3 秒内多次点击按钮，这些点击事件会被忽略，直到前一个数据加载完成后再处理下一个点击事件。
总结
exhaustMap 操作符是 RxJS 中非常有用的一个操作符，它可以帮助我们处理用户输入、防止多次提交等问题。在实际应用中，我们应该根据具体的场景选择合适的操作符来解决问题，而不是一味地使用 exhaustMap 操作符。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65841cbcd2f5e1655dee42d6