javascript - RXJS - 嵌套 concapMap 是否等同于顺序 concatMap？

Question

当使用 RXJS 时，我问自己嵌套的 concatMap 是否等同于顺序的。考虑以下示例:

observable1.pipe(
   concatMap(result1 => observable2.pipe(
      concatMap(result2 => observable3.pipe(
         concatMap(result3 => of(result3)
      )
   )
).susbcribe((result) => {...});

这将导致结果为结果3。为了避免嵌套，我想写成如下:

of(null).pipe(
   concatMap(() => observable1),
   concatMap(result1 => observable2),
   concatMap(result2 => observable3),
   concatMap(result3 => of(result3))
).susbcribe((result) => {...});

这将导致 result 也成为 result3。即使在细节级别上可能存在差异，我是否可以假设连接可观察量的两种方法都被认为是等效的(例如，关于失败)？

感谢任何帮助...

Answer 1

不，它们在所有情况下的行为方式并不相同。

嵌套ConcatMap

observable1.pipe(
  concatMap(result1 => inner2)
)

inner2 = observable2.pipe(
  concatMap(result2 => observable3.pipe(
    concatMap(result3 => of(result3))
  ))
))

当上一个 inner2 observable 完成时，会将下一个值从 observable1 映射到 inner2。

顺序ConcatMap

observable1.pipe(
  concatMap(result1 => observable2),
  concatMap(result2 => observable3),
  concatMap(result3 => of(result3))
)

当上一个 observable2 完成时，会将下一个值从 observable1 映射到 observable2。

您在最终订阅回调中收到的结果将是相同的，并且将以相同的顺序到达。但您收到这些结果的时间可能会有所不同，因为 Nested ConcatMap 中的可观察量可能会晚于 Sequential ConcatMap 中的可观察量映射到后续 inner2 可观察量strong> 将映射到后续的 observable2 可观察量，因为 inner2 可能比 observable2 需要更长的时间才能完成。

示例

使用三个可观察量 obs_1、obs_2 和 obs_3 来说明事件发生顺序的示例:https://stackblitz.com/edit/rxjs-mxfdtn?file=index.ts .

对于嵌套 ConcatMap，obs_2 和 obs_3 是同一个内部可观察量 (inner2) 的一部分，因此第二个 inner2 code> 仅在第一个 inner2(包含第一个 obs_2、第一个 obs_3、第二个 obs_3)完成后订阅。使用 Sequential ConcatMap，一旦第一个 obs_2 完成，就会订阅第二个 obs_2。

obs_1: --11--12|
obs_2: --21--22|
obs_3: --31--32|

// Nested ConcatMap
   ❶
--11--12|~~~~~~~~~~~~~~~~~12
   │                       └--21--22|~~~22
   │                           │         └--31--32|
   │        ❷             ❸    └--31--32|
   └--21--22|~~~22        |
       │         └--31--32|    
       └--31--32|              

output: --31--32----31--32--------31--32----31--32|


// Sequential ConcatMap
   ❶
--11--12|~~~12
   │         └--21--22|~~~21~~~~~~~~22
   │                       │         └--31--32|
   │        ❷              └--31--32|
   └--21--22|~~~22        ❸
       │         └--31--32|
       └--31--32|

output: --31--32----31--32----31--32----31--32|


x~~~x    x is emitted at the first position but concatMap is holding the value 
    └O   back and waits with ~ until a previous observable completes and then 
         maps the value to the observable O.

❶        start of the 1st obs_2. For Nested ConcatMap this also marks the start of 
         the 1st inner2.

❷        The 1st obs_2 completed but the 1st inner2 hasn't completed yet.
         Nested ConcatMap waits until the 1st inner2 completes before it maps 12 to 
         the 2nd inner2. Sequential ConcatMap will map 12 to the 2nd obs_2 straight away. 

❸        The 1st inner2 completed. Nested ConcatMap maps 12 to the 2nd inner2.
         Sequential ConcatMap has already mapped 12 to the 2nd obs_2 by this time
         and this 2nd obs_2 has already emitted both values and completed but concatMap
         has buffered those values until now.

正如您所看到的，顺序 ConcatMap 方法比嵌套 ConcatMap 方法更早地订阅第二个 obs_2 可观察值。