Angular技术问询：如何优化嵌套Observable的批量API请求实现方式

你的当前实现虽然能正常运行，但确实存在不少可以优化的点：每个视频的缩略图请求都是在模板通过async管道单独发起的，这不仅会产生大量零散的HTTP请求，还可能因为组件重渲染触发重复请求，同时多async管道也会增加变更检测的开销，状态管理也会变得零散。

下面是几种更优的实现思路，按推荐程度排序：

1. 在数据流中批量完成所有嵌套请求（推荐） #

我们可以在RxJS数据流里，把视频列表请求和后续的缩略图请求一次性合并完成，组件直接拿到包含完整缩略图数据的视频数组，不需要模板再处理异步逻辑。

核心思路是用switchMap承接列表请求的结果，然后用forkJoin批量发起所有缩略图请求，最后把请求结果和原视频数据映射成完整的VimeoVid对象。

修改后的服务端代码：

return this.client.request(new HttpRequest("GET", request, { 
  headers: new HttpHeaders({ Authorization: `bearer ${environment.vimeoConfig.accesstoken}` }) 
})).pipe(
  filter((response) => response instanceof HttpResponse),
  tap((res: HttpResponse<any>) => {
    pagingQuery.maxpages = res.body.total / batchSize;
    if (pagingQuery.maxpages % 1 > 0) {
      pagingQuery.maxpages = Math.floor(pagingQuery.maxpages) + 1;
    }
    pagingQuery.page++;
  }),
  switchMap((res: HttpResponse<any>) => {
    // 提取视频列表数据
    const videoDataList = res.body.data as any[];
    // 为每个视频创建缩略图请求的Observable
    const thumbRequests$ = videoDataList.map(data => 
      this.client.get(`https://api.vimeo.com${data.pictures.uri}?sizes=96x54`, {
        headers: new HttpHeaders({ Authorization: `bearer ${environment.vimeoConfig.accesstoken}` })
      })
    );
    // 批量发起请求，等待所有请求完成
    return forkJoin(thumbRequests$).pipe(
      // 把缩略图结果和原视频数据一一对应，生成完整的VimeoVid数组
      map(thumbResponses => 
        videoDataList.map((data, index) => {
          const thumb = thumbResponses[index];
          return {
            id: data.uri.split('/')[2],
            title: data.name,
            desc: data.description,
            date: data.created_time,
            thumbid: "",
            durationInSeconds: data.duration,
            links: new Map(data.files.map(file => [file.height ?? 'hls', file.link])),
            // 直接把缩略图数据赋值，不再返回Observable
            thumb: thumb.body
          } as VimeoVid;
        })
      )
    );
  })
);

对应的模板代码可以大幅简化，不需要async管道，还能统一处理加载状态：

<!-- 组件内维护isLoading变量，控制全局加载状态 -->
<ng-container *ngIf="isLoading; else videoList">
  <!-- 全局骨架屏，替换成你现有的骨架组件 -->
  <div class="skeleton-list">
    <div class="skeleton-item"></div>
    <div class="skeleton-item"></div>
    <div class="skeleton-item"></div>
  </div>
</ng-container>
<ng-template #videoList>
  <mat-list-option class="option" *ngFor="let vid of vids" [value]="vid">
    <mat-radio-button color="primary" [checked]="_selectedVid === vid"></mat-radio-button>
    <img [src]="vid.thumb.sizes[0].link" alt="Video thumbnail">
    <div class="vid-title sub1">{{vid.title}}</div>
    <div class="sub1">Private link</div>
    <div class="sub1">{{format(vid.date)}}</div>
  </mat-list-option>
</ng-template>

这种方式的优势：

• 所有请求在服务层批量处理，组件逻辑更简洁
• 避免模板中多个async管道带来的性能损耗
• 可以统一管理加载、错误状态（比如在pipe中添加catchError捕获异常）

2. 为缩略图请求添加缓存（可选补充） #

如果用户可能多次查看同一个视频列表，或者组件会频繁重渲染，可以给缩略图请求添加缓存，避免重复请求相同资源。

可以用shareReplay操作符快速实现缓存：

// 在创建缩略图请求时添加shareReplay
const thumbRequests$ = videoDataList.map(data => 
  this.client.get(`https://api.vimeo.com${data.pictures.uri}?sizes=96x54`, {
    headers: new HttpHeaders({ Authorization: `bearer ${environment.vimeoConfig.accesstoken}` })
  }).pipe(shareReplay(1)) // 缓存请求结果，后续订阅直接返回缓存数据
);

如果是更复杂的场景，也可以封装一个通用的缓存服务，根据请求URL缓存Observable，彻底避免重复发起相同请求。

3. 保留模板async但优化请求控制（不推荐，仅兼容场景） #

如果因为某些限制不能修改服务层逻辑，也可以优化模板中的async使用：

• 在组件内提前订阅并缓存videoObservable的结果，而不是每次模板渲染都发起请求
• 使用trackBy优化*ngFor的渲染性能，避免不必要的组件销毁重建：

<mat-list-option class="option" *ngFor="let vid of vids; trackBy: trackById" [value]="vid">
  <!-- 其余模板代码不变 -->
</mat-list-option>

组件内添加trackById方法：

trackById(index: number, vid: VimeoVid): string {
  return vid.id;
}

这种方式只能缓解部分问题，本质还是每个请求单独发起，不如第一种方案彻底。

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