NgRx Effect调用子服务问题：如何等待异步请求完成

原问题核心是：原本通过combineLatest并行调用三个接口，但现在需要基于组织列表的每一项发起子请求，却没等所有子请求完成就触发了成功动作，导致返回的数据不完整。

优化思路：

• 先获取组织列表，再为每个组织单独发起功能查询请求
• 等待所有子请求完成后，再把整合好的数据传给成功动作

优化后的代码示例：

loadOrganisations$ = createEffect(() =>
  this.actions$.pipe(
    ofType(OrganisationActions.loadOrganisations),
    switchMap(() => 
      // 先获取组织列表
      this.adminOrganisationService.list().pipe(
        // 对每个组织发起功能查询请求，并行执行用mergeMap，串行用concatMap
        mergeMap((organisations) => 
          // 用forkJoin等待所有子请求完成
          forkJoin(
            organisations.map(org => 
              this.adminService.getOrganisationAppFeatures(org.id).pipe(
                // 将组织数据和对应的功能数据合并
                map(features => ({ ...org, features }))
              )
            )
          )
        ),
        // 所有子请求完成后，触发成功动作
        map(organisationsWithFeatures => 
          OrganisationActions.loadOrganisationsSuccess({ organisations: organisationsWithFeatures })
        ),
        catchError(error => 
          of(OrganisationActions.loadOrganisationsFailure({ error }))
        )
      )
    )
  )
);

关键说明：

• 使用mergeMap（并行）或concatMap（串行）来处理组织列表的子请求，根据业务需求选择：并行请求速度更快，但可能给服务器带来压力；串行更稳妥，适合请求限制严格的场景
• forkJoin会等待所有传入的Observable都完成后，把结果收集成数组返回，确保所有组织的功能数据都获取到后才触发成功动作
• 每个子请求中用map把组织原始数据和查询到的功能数据合并，最终得到完整的组织对象数组

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