Angular RxJS配置shareReplay后仍重复发起HTTP请求问题排查

核心问题是你把posts$定义成了服务类的get访问器，每次代码访问this.postService.posts$时，getter都会执行并返回一个全新的Observable实例：

• 第一个标签页订阅postsWithAddedPost$时，内部调用一次get posts$()得到第一个HTTP Observable实例，发起第一次请求，这个实例的shareReplay只对自身生效
• 切换到第二个标签页订阅postsOther$时，又调用一次get posts$()得到第二个完全独立的HTTP Observable实例，自然会发起第二次请求，和前一个实例的缓存完全无关

同时你原有代码里的postsWithAddedPost$的scan逻辑存在隐藏问题：第一次posts$返回的是Post数组，后续postInsertedAction$返回的是单个Post，直接拼接会导致数组嵌套结构异常。

1. 修正服务层流定义 #

把posts$从get访问器改成普通类属性，全局仅初始化一次，同时修正scan逻辑：

// 服务类代码
// 去掉get访问器，直接定义为只读类属性，全局仅生成一个Observable实例
public readonly posts$ = this.httpClient.get<Post[]>(`${environment.PostsUrl}`).pipe(
  shareReplay(1), // 明确指定缓存1个最新值，行为更清晰
  catchError((err) => this.handleError(err))
);

// postsWithAddedPost$同样改为普通属性，避免每次访问生成新流
public readonly postsWithAddedPost$ = merge(this.posts$, this.postInsertedAction$).pipe(
  scan((acc: Post[], value) => {
    // 区分返回值是初始化的数组还是新增的单个帖子
    if (Array.isArray(value)) return value;
    return [value, ...acc];
  }, [])
);

2. 可选参数配置（RxJS 7+适用） #

如果需要自定义缓存行为，可以明确配置shareReplay参数：

shareReplay({
  bufferSize: 1, // 缓存1个最新值
  refCount: false // 设为false时所有订阅者退订后仍保留缓存；需要自动销毁缓存可设为true
})

修改后整个服务生命周期内posts$只有一个实例，第一次订阅时发起HTTP请求，后续所有订阅都会直接读取shareReplay的缓存数据，不会重复发起请求。

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