Angular中如何利用RxJS优化航天器列表的事件HTTP请求？

方案1：RxJS服务层合并请求，组件仅订阅结果 #

将数据拼接逻辑完全放到服务层，利用RxJS操作符批量请求并合并事件数据，组件只需订阅最终的Observable，避免手动处理异步同步问题。

服务层修改 #

// 重构事件请求为Observable版本（避免Promise转译）
getEventsBySpacecraft(spacecraftId: string): Observable<any[]> {
  const params = { withDetails: false };
  return this.http.get<any[]>(`${this.endpoint}/${spacecraftId}/Events`, { params });
}

// 新增方法：返回带事件数据的航天器列表
getSpacecraftsWithEvents(filters: any): Observable<Spacecraft[]> {
  return this.getSpacecrafts(filters).pipe(
    switchMap(spacecrafts => {
      // 为每个航天器创建事件请求Observable，并关联对应航天器
      const eventRequests = spacecrafts.map(sp => 
        this.getEventsBySpacecraft(sp.id).pipe(
          map(events => ({ ...sp, Events: events }))
        )
      );
      // 并行发起所有事件请求，全部完成后返回拼接好的数组
      return forkJoin(eventRequests);
    })
  );
}

组件层修改 #

public spacecrafts$: Observable<Spacecraft[]>;
public isLoading = true;

ngOnInit(): void {
  this.getSpacecraftWithEvents();
}

getSpacecraftWithEvents() {
  this.spacecrafts$ = this.spacecraftService.getSpacecraftsWithEvents(filters).pipe(
    finalize(() => this.isLoading = false)
  );
}

模板使用async管道 #

<div *ngIf="isLoading">加载中...</div>

<!-- 列表视图 -->
<list-view *ngIf="viewType === 'list'" 
           *ngFor="let sp of spacecrafts$ | async" 
           [spacecraft]="sp">
</list-view>

<!-- 网格视图 -->
<grid-view *ngIf="viewType === 'grid'" 
           *ngFor="let sp of spacecrafts$ | async" 
           [spacecraft]="sp">
</grid-view>

该方案优势：服务层完成所有数据拼接，组件无需处理异步逻辑；async管道自动管理订阅/取消订阅，子组件仅在数据完全就绪后渲染，切换视图时复用缓存数据，无重复请求。

方案2：BehaviorSubject缓存数据，避免重复请求 #

在服务层维护缓存，仅对未加载事件的航天器发起请求，切换视图时直接复用缓存数据。

服务层修改 #

private spacecraftsWithEvents$ = new BehaviorSubject<Spacecraft[]>([]);
public readonly spacecraftsWithEvents = this.spacecraftsWithEvents$.asObservable();

getSpacecraftsWithEvents(filters: any): void {
  this.getSpacecrafts(filters).subscribe(spacecrafts => {
    // 优先使用已有缓存数据
    const updatedSpacecrafts = spacecrafts.map(sp => {
      const existing = this.spacecraftsWithEvents$.value.find(s => s.id === sp.id);
      return existing ? existing : sp;
    });

    // 仅对无事件数据的航天器发起请求
    const pendingRequests = updatedSpacecrafts
      .filter(sp => !sp.Events)
      .map(sp => this.getEventsBySpacecraft(sp.id).pipe(
        map(events => ({ ...sp, Events: events }))
      ));

    forkJoin(pendingRequests).subscribe(updatedSpaces => {
      const finalList = updatedSpacecrafts.map(sp => {
        const updated = updatedSpaces.find(s => s.id === sp.id);
        return updated || sp;
      });
      this.spacecraftsWithEvents$.next(finalList);
    });
  });
}

组件层订阅缓存 #

ngOnInit(): void {
  this.spacecraftService.getSpacecraftsWithEvents(filters);
  this.spacecrafts$ = this.spacecraftService.spacecraftsWithEvents;
}

模板同样使用async管道，切换视图时直接读取缓存，无重复HTTP请求。

方案3：改进现有async/await方案，触发变更检测 #

若不想使用RxJS，可通过修改数组引用触发Angular变更检测，确保子组件同步更新。

组件层修改 #

public async getSpacecraftEvents() {
  let updatedSpacecrafts = [...this.spacecrafts];
  for (let i = 0; i < updatedSpacecrafts.length; i++) {
    const sp = updatedSpacecrafts[i];
    const events = await this.spacecraftService.getEventsBySpacecraftAsync(sp.id);
    // 替换数组元素而非直接修改属性
    updatedSpacecrafts[i] = { ...sp, Events: events };
    // 每次更新后刷新数组引用，触发变更检测
    this.spacecrafts = [...updatedSpacecrafts];
  }
  this.isLoading = false;
}

子组件监听输入变化 #

@Input() spacecraft: Spacecraft;

ngOnChanges(changes: SimpleChanges) {
  if (changes.spacecraft?.currentValue) {
    // 事件数据更新后执行业务逻辑
    this.calculateEventCounts();
  }
}

通过替换数组引用触发变更检测，确保子组件能感知到航天器对象的更新。

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