Angular中如何等待forEach循环内API调用结果及处理错误

解决方案代码 #

// 组件类中新增状态控制变量
isLoading = true;
private apiErrors: string[] = [];

private loadActifsMachines(): Observable<any[]> {
  // 重置初始状态
  this.isLoading = true;
  this.apiErrors = [];
  this.actifs_machines = [];

  // 构建所有API请求的Observable数组
  const apiRequests = this.ActifModelEvent.map(actif => {
    return this.actifsService.getActifsMachines(actif.atf_Id)
      .pipe(
        map(res => this.matchesLabel(res, actif)),
        // 捕获单个请求错误，存入聚合数组，返回空数组避免中断整体流程
        catchError(error => {
          const errorMsg = `Error getting List Actif Machines [actif_id:${actif.atf_Id}]. Error:${error}`;
          this.apiErrors.push(errorMsg);
          console.error(errorMsg);
          return of([]);
        })
      );
  });

  // 并行执行所有请求，等待全部完成
  return forkJoin(apiRequests).pipe(
    tap(results => {
      // 合并所有请求返回的数据
      results.forEach(actifMachinesData => {
        this.actifs_machines = [...this.actifs_machines, ...actifMachinesData];
      });
      // 设置数据网格数据源（根据你的组件实际属性调整）
      // this.dataGrid.dataSource = this.actifs_machines;
    }),
    finalize(() => {
      // 无论成功失败，最终隐藏加载图标
      this.isLoading = false;
      // 处理聚合错误（可添加UI提示）
      if (this.apiErrors.length > 0) {
        console.error('批量API调用存在错误:', this.apiErrors);
        // 示例：this.notificationService.warn('部分数据加载失败，请查看控制台');
      }
    }),
    // 返回最终聚合数据
    map(() => this.actifs_machines)
  );
}

// 外部调用示例
// this.loadActifsMachines().subscribe(finalData => {
//   console.log('全部加载完成，最终数据:', finalData);
// });

关键说明 #

• 加载状态控制：通过isLoading变量绑定到数据网格的加载属性（如各类UI组件的loading参数），请求开始时设为true，finalize钩子中统一置为false，确保所有场景下都会隐藏加载图标。
• 错误聚合：每个API请求单独用catchError捕获错误，存入apiErrors数组，同时返回空数组让forkJoin继续执行剩余请求，不会因单个请求失败导致整个批量任务终止。
• 统一等待逻辑：用forkJoin替代原有的forEach+单独订阅，实现并行执行所有API并等待全部完成后再处理结果。
• 结果返回：方法返回Observable<any[]>，外部订阅后可直接获取最终的actifs_machines数据。
• 资源管理：若需支持请求取消，可在pipe中添加takeUntil配合组件销毁信号，避免内存泄漏。

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