Angular中如何将首个Observable输出作为入参发起第二个HTTP请求

问题原因 #

Array.prototype.forEach 无法等待异步回调执行完成：你传入forEach的async函数会立即返回Promise实例，forEach不会等待这些Promise状态变更，就直接完成了循环遍历，所以整个函数会在所有HTTP请求执行完成前就提前返回空的commIds数组。后续异步请求完成后才会往数组里塞值，但此时函数早已返回结果，所以你拿到的永远是空数组。

解决方案1：async/await 改造（适配现有Promise写法） #

首先将方法改为异步方法，返回Promise<number[]>，用支持异步等待的for...of循环替代forEach：

// 方法返回类型改为Promise<number[]>
async IdSelection() : Promise<number[]>{
  const Ids : number[] = this.selection.selected.map(element => element.Id);
  const commIds : number[]=[];

  // 用for...of替代forEach，可正常等待异步操作
  for (const element of Ids) {
    // 注：RxJS 7+ 已废弃toPromise()，推荐替换为firstValueFrom
    // const res = await firstValueFrom(this.TaskService.getCmntDetails(element , 0 , '%27%27'))
    const res =  await this.TaskService.getCmntDetails(element , 0 , '%27%27').toPromise();
    if(res["commentId"] !=null){
      // 内层循环同样用for...of
      for (const data of res["commentId"]) {
        // const innerRes = await firstValueFrom(this.TaskService.getCmntDetails(0, Number(data) , '%27%27'))
        const innerRes = await this.TaskService.getCmntDetails(0, Number(data) , '%27%27').toPromise();
        commIds.push(...innerRes["commentNewId"]);
      }
    }
  }
  return commIds;
}

调用该方法时需要用await或者.then()接收返回值：

// 调用示例
async yourCallerMethod() {
  const ids = await this.IdSelection();
  // 后续处理逻辑
}

解决方案2：RxJS 流式处理（Angular 原生推荐） #

Angular HTTP客户端默认返回Observable，不需要转Promise，用RxJS操作符处理链式请求更灵活，也支持请求取消、错误重试等能力：

import { switchMap, forkJoin, map, concatMap } from 'rxjs';

IdSelection() {
  const Ids : number[] = this.selection.selected.map(element => element.Id);
  // 批量并行处理外层ID的请求，如需严格串行执行可替换为concatMap
  return forkJoin(Ids.map(id => this.TaskService.getCmntDetails(id, 0, '%27%27'))).pipe(
    // 拿到所有外层请求结果后，批量处理内层请求
    switchMap(resList => {
      // 收集所有需要发起的内层请求
      const innerReqs = [];
      resList.forEach(res => {
        if (res.commentId) {
          res.commentId.forEach(data => {
            innerReqs.push(this.TaskService.getCmntDetails(0, Number(data), '%27%27'))
          })
        }
      })
      return forkJoin(innerReqs)
    }),
    // 合并所有内层请求的结果
    map(innerResList => {
      const commIds = [];
      innerResList.forEach(innerRes => {
        commIds.push(...innerRes.commentNewId)
      })
      return commIds;
    })
  )
}

调用该方法时需要订阅Observable：

// 调用示例
IdSelection().subscribe(ids => {
  // 后续处理逻辑
})

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