前言
RxJS 是一个非常强大的响应性编程库，它可以为我们在编写前端应用程序时提供很多便利。在 RxJS 中，concatMap 和 exhaustMap 是两个常用的操作符，它们可以轻松地控制 Observable 流的订阅方式。本文将详细介绍这两个操作符的原理和使用方法，帮助读者更好地应用 RxJS。
concatMap
concatMap 可以让我们控制 Observable 流的订阅方式，具体来说，它可以将一个数据流映射成一个 Observable，然后将这个 Observable 连接到前一个数据流中。这意味着，只有前一个 Observable 完全完成后，concatMap 才会订阅下一个 Observable。
以下是 concatMap 操作符的实现原理：
-- -------------------- ---- -------
------ -------- ------------ ----------- ------- -- ------ ------- -- ------------------- ---------------- ----------- ------------------- ---
------ -------- ------------ -- ----------- -------- -- ------ ------- -- -------------------- --------------- ------------ -- ----------- -- ----------- ------- ----------- ------- -- --- ------------------- ---
------ -------- ------------ ----------- ------- -- ------ ------- -- ------------------- ---------------- ------------- -- ----------- -- ----------- ------- ----------- ------- -- -- - ----------- ------------------- -- -
------ ---------------- -- ------ ------- --
------------------------ ----------------------------------- -- ----------- ------- --
-------------- - ------------------------ ----------- ------ ------------ - --------------
--
--
-可以看到，concatMap 又基于 mergeMap 实现，也就是说，concatMap 实际上就是将 mergeMap 的参数 maxConcurrency 设置成了 1。当然，这个参数也可以通过第二个可选参数传递。
使用 concatMap 操作符：
-- -------------------- ---- ------- ------ - --------- - ---- ------- ------ - ---------- --- - ---- ----------------- ----- --- - ------------------- -------------- --------------- -- ------------------------- -- --------------- ----- ------ -- -------------------- ------ --- -- ------------------- --------- -- -- ------------------------ ---
exhaustMap
exhaustMap 也可以控制 Observable 流的订阅方式，但与 concatMap 不同的是，exhaustMap 只会订阅当前的 Observable，而忽略同一时刻的其他 Observable。也就是说，如果当前 Observable 还没有完成，那么后续的 Observable 就会被忽略。
以下是 exhaustMap 操作符的实现原理：
export function exhaustMap<T, R>(project: (value: T, index: number) => ObservableInput<R>): OperatorFunction<T, R> {
return (source: Observable<T>) => source.pipe(exhaustMap((value, index) => from(project(value, index))));
}可以看到，exhaustMap 只需要将 source 流传递给内部的 exhaustMap 操作符并添加一个从项目函数返回的 Observable 即可。
使用 exhaustMap 操作符：
-- -------------------- ---- ------- ------ - --------- - ---- ------- ------ - ----------- --- - ---- ----------------- ----- --- - ------------------- -------------- ---------------- -- ------------------------- -- --------------- ----- ------ -- -------------------- ------ --- -- ------------------- --------- -- -- ------------------------ ---
总结
concatMap 和 exhaustMap 都是很强大的操作符，能够让我们非常方便地控制 Observable 流的订阅方式。通过本篇文章的讲解，读者应该可以掌握它们的使用方法和原理了。需要注意的是，在实际开发中要根据具体情况选择正确的操作符，以免造成不必要的麻烦。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c63a8810032fedd38bf046