Angular 15中shareReplay()方法未按预期工作问题排查

组件中声明的data$仅通过!做了非空断言，但从未赋值，直接调用subscribe()自然会抛出Cannot read properties of undefined (reading 'subscribe')错误——你没有将API服务返回的Observable关联到组件的data$变量上。

方案1：直接调用API服务方法并订阅 #

修改组件的加载方法，直接调用api.getUsers()获取Observable后订阅：

// test1-component.ts
loadTest1Data() {
  this.api.getUsers().subscribe({
    next: (response) => {
      console.log('Loading data for Component - 1', response);
    },
    error: (error) => {
      console.log('Error While Loading data for Component - 1', error);
    },
    complete: () => {
      console.log('Success');
    },
  });
}

test2、test3组件做同样修改即可。此时shareReplay()会缓存API响应，三个组件订阅时只会触发一次HTTP请求。

方案2：先赋值data$再订阅（或使用AsyncPipe） #

先将组件的data$赋值为API服务返回的Observable，再进行订阅：

// test1-component.ts
data$!: Observable<any>;

ngOnInit(): void {
  this.data$ = this.api.getUsers(); // 关键：赋值Observable
  this.loadTest1Data();
}

loadTest1Data() {
  this.data$.subscribe({
    // 订阅逻辑不变
  });
}

更推荐使用Angular的AsyncPipe，它会自动处理订阅和取消订阅，代码更简洁：

<!-- test1-component模板 -->
<div *ngIf="data$ | async as data">
  <!-- 渲染data内容 -->
</div>

此时组件无需手动调用subscribe()，AsyncPipe会自动完成订阅，且shareReplay()的缓存依然生效。

方案1：在API服务中缓存Observable实例 #

如果希望确保全局只触发一次API请求（即使组件销毁后重新初始化），可以在服务中缓存Observable实例，而不是每次调用getUsers()都返回新的Observable：

// api-service.ts
private users$?: Observable<any>;

getUsers(): Observable<any> {
  if (!this.users$) {
    let headers = new HttpHeaders();
    headers = headers.set('app-id', '63b691428f53f6370fc9eed6');
    this.users$ = this.http.get(this.url, { headers }).pipe(
      shareReplay(1) // 指定缓存1个值
    );
  }
  return this.users$;
}

这种方式下，无论多少组件调用getUsers()，只会发起一次HTTP请求，后续都复用缓存的响应。

方案2：使用BehaviorSubject缓存数据 #

在服务中用BehaviorSubject存储数据，组件订阅这个Subject，API请求仅在数据不存在时触发：

// api-service.ts
private usersSubject = new BehaviorSubject<any>(null);
public users$ = this.usersSubject.asObservable();

getUsers(): void {
  // 仅当没有数据时发起请求
  if (!this.usersSubject.value) {
    let headers = new HttpHeaders();
    headers = headers.set('app-id', '63b691428f53f6370fc9eed6');
    this.http.get(this.url, { headers }).subscribe({
      next: (resp) => this.usersSubject.next(resp),
      error: (err) => this.usersSubject.error(err)
    });
  }
}

组件中只需调用api.getUsers()，然后订阅api.users$即可：

// test1-component.ts
ngOnInit(): void {
  this.api.getUsers();
  this.api.users$.subscribe({
    next: (response) => {
      console.log('Loading data for Component - 1', response);
    }
  });
}

内容的提问来源于stack exchange，提问作者Mr. Learner