Angular多组件调用同个后端接口时如何避免重复请求共享返回数据

你可以直接使用RxJS内置的shareReplay操作符实现需求，不需要自己手写Subject缓存逻辑，能完美覆盖「并发调用」和「后续调用复用缓存」两个场景。 #

实现原理 #

• shareReplay会将源Observable（也就是你的HTTP请求）的结果重播给后续的新订阅者，不会重复发起请求
• 首次调用时如果有多个订阅者同时订阅，只会发起1次HTTP请求，所有订阅者都能拿到同一份返回结果
• 因为你的配置更新频率极低，设置bufferSize: 1就能始终复用第一次请求的结果，不需要额外处理缓存失效逻辑，如果后续需要支持刷新缓存，加个重置方法即可

修改后的服务代码 #

@Injectable()
export class ConfigurationService {

  private ConfigurationUrl: string = 'api/configurations/';
  private httpHeaders: HttpHeaders;
  private commonSettings$: Observable<CommonSettings>;
  // ...
  constructor(private httpClient: HttpClient) { 
    // 提前定义共享的Observable，只在第一次订阅时触发请求
    this.commonSettings$ = this.httpClient.get<CommonSettings>(this.ConfigurationUrl + "common")
      .pipe(
        shareReplay({
          bufferSize: 1, // 只缓存最近1次结果
          refCount: false // 即使没有订阅者也保留缓存，适合配置这种低频更新的数据
        })
      );
  }
  // ...
  loadCommonSettings(): Observable<CommonSettings> {
    // 直接返回已经加了共享逻辑的Observable即可
    return this.commonSettings$;
  }

  // 如果后续需要支持手动刷新配置，可新增这个方法
  refreshCommonSettings(): void {
    this.commonSettings$ = this.httpClient.get<CommonSettings>(this.ConfigurationUrl + "common")
      .pipe(
        shareReplay({
          bufferSize: 1,
          refCount: false
        })
      );
  }
  // ...
}

调用说明 #

你的组件代码不需要做任何修改，原有调用逻辑完全兼容。调整后不管多少个组件同时调用loadCommonSettings方法，都只会发起一次HTTP请求，后续所有调用都会直接返回缓存的结果。 #

方案优势 #

你提到的手写普通缓存解决不了并发请求、自己封装Subject逻辑容易出问题的痛点，这个方案都能规避：shareReplay是RxJS官方提供的操作符，内部基于ReplaySubject实现，已经处理了所有边界情况，包括请求出错时新订阅者会自动重新触发请求的逻辑，可靠性远高于自定义缓存方案。

内容的提问来源于stack exchange，提问作者Serdg D.