请求确认RxJS中from、pipe与map操作符的执行逻辑

示例代码 #

from([1,2,3,]).pipe(
  map((data)=>{
      console.log(data,'map');
      return data
    })
)
.subscribe(data=>console.log(data, 'from subscribe'))
/*
输出：
1 map
1 from subscribe
2 map
2 from subscribe
3 map
3 from subscribe
*/

你的原理解 #

• 调用subscribe时，首先map订阅from Observable。
• from发出的每个值会被打印，并以单独Observable的形式从map发出，共3个Observable。
• .subscribe订阅map返回的每个Observable，从而产生第二条打印信息。

纠正后的执行逻辑 #

你的理解存在核心错误：map操作符不会返回多个Observable，它始终返回一个单一的Observable，它的作用是对上游Observable发出的每个值做转换后，传递给下游。正确的执行流程是：

1. 当调用.subscribe()时，RxJS的冷Observable特性触发整个订阅链激活：下游的订阅会先触发pipe里的map操作符订阅上游的from Observable。
2. from Observable开始逐个发出数组中的值：1、2、3。
3. 每个值进入map操作符的回调函数：先打印data map，然后返回这个值本身（这里未做转换，仅原样返回），map会把处理后的值传递给下游的订阅者。
4. 下游的subscribe回调接收到这个值，打印data from subscribe。
5. 重复步骤3-4，直到from发出所有值并完成整个Observable序列。

简单来说，整个过程是单Observable链的逐个值传递处理，并没有多个Observable被创建和订阅，每个值都是从上游到下游依次经过map处理，再到订阅者输出。

内容的提问来源于stack exchange，提问作者Noob