Angular中SwitchMap与PublishReplay组合使用的异常问题咨询

为什么第一个代码片段没按预期工作？ #

核心问题出在你对publishReplay(1).refCount()的使用位置上。你把这个操作符加在了httpObs上，这直接把原本每次订阅都会重新执行的冷Observable，转换成了一个仅执行一次的共享Observable：

• 当第一个订阅（来自switchMap的第一次切换）到来时，httpObs会执行一次，打印trigger http call，同时缓存结果；
• 之后timer每一秒发出事件，switchMap再去订阅httpObs时，只会拿到之前缓存的结果，不会重新触发执行；
• 因为你的observable有两个订阅者，httpObs的订阅计数永远不会降到0，refCount()也就不会重新连接执行源Observable。

这就是为什么你只看到一次trigger http call，而不是每次timer事件都触发。

你的实际需求拆解 #

从描述来看，你需要的是这样的行为：

• 多个组件共享同一触发事件对应的HTTP响应，新订阅的组件不会额外发起请求，直接获取最近的缓存结果；
• 当有新的触发事件（比如组件OnInit、更新按钮点击）时，要重新发起HTTP请求，所有订阅组件都能收到这次新的响应。

正确的实现方式 #

你第二个示例把publishReplay(1)放在整个链的末尾，其实已经找对了方向，但我们可以优化得更灵活，不需要手动调用connect()。

推荐实现代码 #

// 模拟HTTP请求：每次被订阅都会触发新的请求
const httpObs = Rx.Observable.of("")
  .do(() => console.log("trigger http call"));

// 合并所有触发更新的事件源：这里用timer模拟初始化+更新按钮点击
const triggerEvents = Rx.Observable.timer(0, 1000)
  .do((e) => console.log("new event: " + e));

// 核心逻辑：先通过switchMap触发请求，再用shareReplay实现共享缓存
const sharedData$ = triggerEvents
  .switchMap(() => httpObs)
  .shareReplay({ bufferSize: 1, refCount: true });

// 两个订阅者对应两个组件
const c1 = sharedData$.subscribe(() => console.log("subscriber 1"));
const c2 = sharedData$.subscribe(() => console.log("subscriber 2"));

为什么这能满足你的需求？ #

• triggerEvents统一管理所有需要触发更新的场景，每一个事件都会通过switchMap发起一次全新的HTTP请求；
• shareReplay({bufferSize:1, refCount:true})的作用：
  • 新订阅的组件会直接拿到最近一次请求的缓存结果，不会触发新请求；
  • 当所有组件都取消订阅后，Observable会重置，下次有组件订阅时会等待下一个触发事件再发起请求；
  • 每一个触发事件都会触发一次HTTP请求，所有订阅的组件都会同步收到这次新的响应。

兼容旧RxJS版本的写法 #

如果你使用的是RxJS 6之前的版本，没有shareReplay的配置选项，可以用publishReplay(1).refCount()替代，效果完全一致：

const sharedData$ = triggerEvents
  .switchMap(() => httpObs)
  .publishReplay(1)
  .refCount();

这样既解决了多组件共享请求结果的问题，又保证了触发事件能正常发起新请求，完美匹配你的需求。

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