如何让Angular服务方法返回可传参的共享Observable，确保请求仅触发一次？

问题分析 #

当前代码中每次调用getEntries(id)都会创建一条新的Observable管道，即使传入相同的id，多次订阅也会触发多次requestEntries调用。要实现同一id的请求仅执行一次、多订阅者共享结果的效果，需要针对不同参数值做Observable缓存。

解决方案 #

修改服务代码，添加缓存机制存储不同id对应的共享Observable，同时处理刷新逻辑：

@Injectable({
  providedIn: 'root',
})
export class FetchService {
  // 缓存不同id对应的共享Observable
  private entryCache = new Map<number, Observable<number[]>>();
  // 用于触发刷新的Subject
  private refresh$ = new Subject<number>();

  constructor() {}

  refreshEntries(id: number) {
    // 刷新时清除对应id的缓存，并发送刷新信号
    this.entryCache.delete(id);
    this.refresh$.next(id);
  }

  getEntries(id = 0): Observable<number[]> {
    // 检查缓存中是否已有该id的Observable
    if (!this.entryCache.has(id)) {
      const entry$ = merge(
        // 初始请求触发
        of(id),
        // 仅响应对应id的刷新信号
        this.refresh$.pipe(filter(refreshId => refreshId === id))
      ).pipe(
        mergeMap(currentId => this.requestEntries(currentId)),
        shareReplay(1), // 共享最新结果给所有订阅者
        // 清理缓存，避免内存泄漏
        finalize(() => this.entryCache.delete(id))
      );
      this.entryCache.set(id, entry$);
    }
    return this.entryCache.get(id)!;
  }

  private requestEntries(id: number) {
    console.log('requestEntries called with id:', id);
    // 替换为实际HTTP请求逻辑
    return of([1, 2, 3]);
  }
}

代码说明 #

• 缓存机制：用Map存储每个id对应的Observable，确保同一id只会创建一次请求管道。
• 刷新处理：调用refreshEntries(id)时，删除对应id的缓存并发送信号，触发新一轮请求。
• 共享结果：shareReplay(1)让所有订阅者共享最近一次请求结果，新订阅无需重复发起请求。
• 内存管理：finalize操作符在Observable完成/出错时移除缓存，避免内存泄漏。

调用示例 #

// 组件中调用，多次订阅同一id仅触发一次请求
this.entries$ = this.service.getEntries(0); // 模板中用async pipe订阅
this.service.getEntries(0).subscribe(entries => console.log(entries));

// 触发对应id的刷新，会重新发起请求
this.service.refreshEntries(0);

内容的提问来源于stack exchange，提问作者Ser.Corum