如何在同一函数内等待If-Else分支中所有REST调用执行完成

你需要将整个逻辑改造为异步返回，使用RxJS的forkJoin算子可以非常简洁地实现需求，无需手动管理高阶Observable合并逻辑。

核心思路是把每个元素的处理逻辑统一封装为Observable：走If分支的元素绑定REST调用的Observable，走Else分支的元素直接返回包装了静态值的Observable，最后用forkJoin等待所有Observable执行完成，自动聚合出最终的结果数组。

实现代码 #

import { forkJoin, of } from 'rxjs';
import { map } from 'rxjs/operators';

createNewList(oldList: any[]): Observable<any[]> {
  // 遍历每个元素生成对应的处理任务
  const taskList = oldList.map(element => {
    if (element.isAwesome) {
      // If分支发起REST调用，处理完成后返回修改后的element
      return this.RESTCall().pipe(
        map(result => {
          element.property = result;
          return element;
        })
      );
    } else {
      // Else分支直接返回包装为Observable的原element
      return of(element);
    }
  });

  // forkJoin会等待所有任务执行完成，一次性返回最终结果数组
  return forkJoin(taskList);
}

调用方式 #

因为结果是异步返回的，你需要通过subscribe获取最终的处理结果：

this.createNewList(yourOldList).subscribe({
  next: (newList) => {
    // 此处拿到所有逻辑处理完成的newList，执行后续操作
    console.log(newList);
  },
  error: (err) => {
    // 按需处理全局错误，比如某一个REST调用失败的场景
    console.error('处理失败', err);
  }
});

如果需要实现单个REST调用失败不阻塞整体流程的效果，可以在REST调用的pipe中追加catchError算子处理单个请求的错误，返回默认值即可。

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