我们在前端项目开发中，经常遇到需要进行异步请求的场景。而 RxJS 是一种强大的响应式编程库，能够帮助我们更加优雅地处理异步操作，实现同时性、可读性以及可维护性的提升。RxJS5.5.5 中的 mergeMap 与 switchMap 是两个非常重要的操作符，对于理解这两个操作符的使用，对于我们在开发过程中构建复杂异步逻辑有很好的指导意义。
mergeMap
mergeMap 操作符会将源 Observable 中的每个值映射成一个 Observable，并将这些 Observable 合并成一个单独的 Observable。该操作符的表现类似于某些编程语言中的 flatMap() 方法。mergeMap 将每个源 Observable 中的值映射成一个新的 Observable，同时保留所有的 Observable，直到每个 Observable 都完成后才将它合并成单个 Observable。下面是一个示例代码，说明 mergeMap 的使用。
import { of, timer } from 'rxjs';
import { mergeMap, mapTo } from 'rxjs/operators';
const letters = of('a', 'b', 'c');
const result = letters.pipe(
mergeMap(x => timer(1000).pipe(mapTo(x))),
);
result.subscribe(x => console.log(x));在这个示例代码中，letters 是一个源 Observable，它的值为 a、b 和 c。我们将每个源 Observable 的值通过 mapTo 转换成每个从 timer(1000) 取得的值，在这个例子中是 0、1、2。由于我们使用 mergeMap 操作符，因此每次从源 Observable 中获取一个值时，我们都会创建一个基于 timer 的新 Observable。三个 Observable 都将获得机会 emit 值，因此直到最后一个 Observable 完成其工作后才会垂直合并成单个 Observable。结果将是一个包含 a、b 和 c 的数组，其中每个字母重复了三次。
switchMap
与 mergeMap 不同的是，switchMap 操作符只会发出从源 Observable 最新发出的值的 Observable。所以，如果一个新的源 Observable 到达，它将取消之前的 Observable，将最新到达的 observable（从源 observable 生成的）推入结果流中。以下是一个示例代码，说明 switchMap 的使用。
import { fromEvent, interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';
const clicks = fromEvent(document, 'click');
const result = clicks.pipe(
switchMap(() => interval(1000)),
);
result.subscribe(x => console.log(x));在这个示例代码中，我们在 document 上创建了一个 click 事件，并使用 fromEvent 操作符获得源 Observable。当 click 事件发生时，switchMap 操作符将取消先前的 interval(1000) 操作符创建的 Observable，并创建一个新的 Observable。在这个例子中，switchMap 操作符基于 interval 操作符创建新的 Observable，该操作符每秒 emit 一个值。因此，每次单击事件发生时，会创建一个新的 interval(1000)。如果我们在两次单击事件之间保持鼠标单击，就会产生一系列数字。但是，一旦出现另一个单击事件，就会取消上一个 interval，只发出现在最新的 interval。
mergeMap 和 switchMap 的区别
mergeMap 和 switchMap 的基本行为有所不同。mergeMap 会将每个源 Observable 的值映射到一系列输出 Observable 上，并将它们垂直合并并处理结果流。相反，switchMap 只会处理最近的 Observable，并在新的 Observable 到达时取消旧的 Observable，以确保结果流保持同步。这两个操作符的主要差异在于，mergeMap 允许源 Observable 的值与旧的（以及新的）Observable 同时存在，而 switchMap 只允许一个 Observable 存在于结果流。
总结
在项目开发中，我们经常需要处理异步数据，包括从 API 发送请求、从 DOM 事件、WebSockets 等等中提取数据。RxJS 可以帮助我们减少 JavaScript 中的深度嵌套和回调，使异步操作更加优雅和可维护。mergeMap 和 switchMap 是两个最常用的操作符，可以帮助我们在项目中处理复杂的异步逻辑。在实际使用中，我们应该根据具体情况选择合适的操作符。
以上就是 RxJS5.5.5 的 mergeMap 与 switchMap 使用详解。希望能够对大家的学习和开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649b9b8148841e989485f43e