RxJS 中的 mergeMap() 与 switchMap() 之间的区别
前言
使用 RxJS 是现代化 Web 应用程序开发中的一项重要技术。而 RxJS 中的 mergeMap() 与 switchMap() 作为两个变换操作符，具有一些相同的特性和用途，但也有比较明显的区别，本文将重点介绍它们之间的差异以及适用场景，帮助读者更好地理解优化自己的应用程序。
mergeMap()
mergeMap() 也称为 flatMap()，它的主要功能是将一个值映射为另一个可观察序列，并且将这些可观察序列合并成一个单一的可观察序列。举例来说，如果你有一些异步操作，并且每个异步操作都返回一个可观察序列，那么使用 mergeMap() 可以将这些可观察序列合并起来，并统一发射结果。下面是具体使用方式：
------ - -- - ---- ------- ------ - -------- - ---- ----------------- ----- ------ - ----------- --------- ----- ------- - ------------ ------------ -- ---------- -------- -- ------------------------------- -- --- -- ------ ------ -- ------ ------
对于单个值，mergeMap() 与 map() 是等价的操作符。但是对于返回 Observable 的函数，mergeMap() 将它们的结果合并成一个单一的流，而不是按顺序排列每个流的输出。这样可以更好地利用并行性并使异步代码更有效。
switchMap()
switchMap() 的主要功能是将一个值映射为另一个可观察序列，并关闭上一个可观察序列，只发出最新映射的可观察序列，并忽略之前的。如果有多个可观察序列仍在工作，则它们将被取消并清除。举例来说，假设我们有一个输入框，我们想要将用户的输入映射为 Ajax 请求并发出请求结果。下面是具体的使用方式：
------ - --------- - ---- -------
------ - --------- - ---- -----------------
----- ------ - ----------------------------------
----- ------ - ----------------------------------
----- ------- - ----------------- --------------
--------------- -- -
----- ---- - -------------------
------ ----------------------
--
--
---------------------- -- -
---------------- - -----
---
-------- --------------------- -
----- --- - ----------------------------------------------------------------------------------------------------
------ ----------
-------------- -- ----------------
---------- -- ------------------------------
-上述代码定义了一个名为 searchWikipedia() 的函数，它返回一个 Promise，该 Promise 解析为特定主题的 JSON 数据。在 search$ 中使用 switchMap() 操作符，可以映射事件并生成 Ajax 请求的 Observable。此后，在 Ajax 请求成功后，它会从 Observable 中发出请求结果，并设置到结果 Div 元素中。
总结
两者主要的区别在于，如果使用 mergeMap()，则所有结果都可以按任意顺序到达 (例如从不同的 HTTP 请求中)，但是使用 switchMap()，只会发射来自最近的可观察序列，并且会在新值到达时立即取消它之前的 Observable，以确保异步操作始终是最新的。也就是说，如果我们只关心最近的异步操作，那么就应该使用 switchMap()；反之，如果我们希望同时处理多个异步操作的数据，请使用 mergeMap()。
建议
可以根据业务需求，结合实际代码场景，更灵活的选择 mergeMap() 或 switchMap() 操作符。使用 RxJS 更好的代码组织可以提高开发工作效率，减少不必要的耗时。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652b7b417d4982a6ebd5a52e