RxJS优化：首个Observable订阅运行时跳过第二个重复订阅

嗨，这个问题在RxJS的实际使用里特别常见——你需要让多个订阅者共享同一个数据源，避免重复触发像API请求这种开销大的操作。核心思路是把你的API请求Observable转换成多播流，让它能缓存结果并自动重播给后续的订阅者。

问题根源 #

你当前的代码每次调用current()方法时，都会生成一个全新的Observable实例。如果两个地方几乎同时订阅，就会各自触发一次companyApiService.get()调用，毕竟此时缓存还没来得及生成。

修复方案：引入shareReplay操作符 #

我们可以通过缓存Observable本身（而不只是缓存数据对象），搭配shareReplay(1)操作符来解决问题。这个操作符的作用是：

1. 第一次订阅时触发源Observable（也就是你的API请求）
2. 缓存最近发射的1个值
3. 后续所有订阅都会直接拿到这个缓存值，不会再发起新的API请求

修改后的代码如下：

private company$: Observable<Company> | null = null; // 用于缓存Observable实例

public current(): Observable<Company> {
  if (!this.company$) {
    if (this.companyId == null) {
      this.company$ = Observable.of(null);
    } else {
      this.company$ = this.companyApiService.get(this.companyId)
        .pipe(
          map(x => {
            this.cachedCompany = x;
            return x;
          }),
          shareReplay(1) // 关键操作符：缓存并重播结果
        );
    }
  }
  return this.company$;
}

额外补充 #

• 如果需要在某些场景下重置缓存（比如用户登出、公司ID变更），只需要把this.company$设为null即可，下次调用current()时会重新发起API请求。
• 如果你希望当最后一个订阅者取消订阅后自动清理源Observable，可以使用shareReplay({ bufferSize: 1, refCount: true })，这样下次订阅时会重新触发请求。

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