RxJS中tap操作符被触发两次的问题排查

这问题我之前也踩过坑，核心原因其实很好理解：RxJS里由of()创建的是冷Observable（Cold Observable），这类Observable的特点是每次被订阅时，都会从头完整执行一遍整个数据流管道。

看你的代码：

function that() { 
  let obs = of({}); 
  obs = obs.pipe(tap(() => console.log('here'))) 
  obs.subscribe(); // 第一次订阅：触发tap，打印"here"
  return obs; 
} 
const res = that(); 
res.subscribe(() => console.log('finished')); // 第二次订阅：再次触发tap，又打印"here"

内部的obs.subscribe()已经让数据流跑了一遍，外部调用res.subscribe()时，因为是冷Observable，又会重新执行一遍pipe里的逻辑，所以tap里的console.log('here')被触发了两次。

解决方案 #

根据你的实际需求，有两种常用的处理方式：

1. 让Observable多播，多次订阅共享同一份数据流 #

如果你的副作用（tap里的逻辑）需要和Observable的数据流绑定，且希望无论订阅多少次都只执行一次，那么可以用shareReplay(1)操作符把冷Observable转成热Observable（多播Observable）：

function that() { 
  let obs = of({}).pipe(
    tap(() => console.log('here')),
    shareReplay(1) // 关键：共享数据流，多次订阅只执行一次管道逻辑
  ); 
  obs.subscribe(); // 第一次订阅触发tap，打印"here"
  return obs; 
} 
const res = that(); 
res.subscribe(() => console.log('finished')); // 订阅共享的数据流，不会再次触发tap

这样"here"只会打印一次，外部订阅会正常收到值并打印"finished"。

2. 解耦副作用与返回的Observable #

如果你的需求只是函数被调用时执行一次副作用，不需要依赖Observable的数据流，那完全可以把副作用从Observable管道里抽出来，直接在函数内执行：

function that() { 
  // 直接执行副作用，无需借助Observable
  console.log('here');
  
  // 返回干净的Observable，外部订阅时不会触发重复的副作用
  return of({}); 
} 
const res = that(); // 调用函数时立即打印"here"
res.subscribe(() => console.log('finished')); // 打印"finished"

这种方式更简洁，也避免了不必要的Observable订阅操作。

总结 #

• 冷Observable每次订阅都会重新执行管道逻辑，这是导致tap触发两次的根本原因；
• 若副作用依赖数据流，用shareReplay(1)实现多播共享；
• 若副作用仅需执行一次，直接在函数内调用即可，无需绑定Observable。

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