RxJS 中如何使用 exhaustMap() 操作符推迟请求处理直到前后两个 Observable 完成
在前端开发中，我们不可避免地会遇到需要依赖其他异步请求的情况。如果这些请求并发执行，会导致许多不必要的请求和响应，影响使用体验。为了避免这种情况，我们需要使用 RxJS 中的 exhaustMap() 操作符。
exhaustMap() 操作符将源 Observable 发出的值映射为一个内部 Observable，只有当这个内部 Observable 完成时，才会处理下一个值。在该周期内，任何新发出的源值都会被忽略。
exhaustMap() 操作符的用法如下：
exhaustMap(project: function, resultSelector?: function)
其中，project 是一个高阶函数，接收源 Observable 发出的每个值，返回一个内部 Observable。resultSelector 是一个可选函数，它接收 project 函数中返回的内部 Observable 的最后一个值，然后对该值进行转换。
下面是一个使用 exhaustMap() 操作符的示例：
// javascriptcn.com 代码示例
import { fromEvent, interval } from "rxjs";
import { exhaustMap, take } from "rxjs/operators";
const button = document.querySelector("button");
const click$ = fromEvent(button, "click");
click$
.pipe(
exhaustMap(() =>
interval(1000).pipe(
take(5),
)
)
)
.subscribe((val) => console.log(val));在这个示例中，当用户点击按钮时，click$ 就会发出一个值，然后通过 exhaustMap() 操作符将值映射为一个 interval() 内部 Observable。interval() 操作符会以每秒一次的频率发出值，该值会在 take() 操作符中限制最大次数。当内部 Observable 完成时，exhaustMap() 操作符才会处理 click$ 发出的下一个值。在该周期内，任何新发出的 click$ 的值都会被忽略。
同样的，我们也可以通过第二个参数 resultSelector 对内部 Observable 的值进行转换：
// javascriptcn.com 代码示例
import { fromEvent, interval } from "rxjs";
import { exhaustMap, take } from "rxjs/operators";
const button = document.querySelector("button");
const click$ = fromEvent(button, "click");
click$
.pipe(
exhaustMap(() =>
interval(1000).pipe(
take(5),
),
(outerVal, innerVal) => `Outer: ${outerVal}, Inner: ${innerVal}`
)
)
.subscribe((val) => console.log(val));在这个示例中，resultSelector 函数将返回内部 Observable 的最后一个值与外部 Observable 的每个值合并成一个字符串。
使用 exhaustMap() 操作符，我们可以避免并发执行多个请求时带来的不必要开销，提高应用的性能和用户体验。
总结
通过学习 RxJS 中 exhaustMap() 操作符的用法，我们可以掌握如何推迟请求处理直到前后两个 Observable 完成的技巧。在实际开发中，我们应该根据具体场景合理运用 exhaustMap() 操作符，提高应用的性能和用户体验。
参考链接
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f73c57d4982a6eb0958fb