如何让嵌套Observable循环执行完成后再执行后续代码

问题核心是initAttributesMap里的多个HTTP请求都是异步执行的，没有等待全部完成就继续后续逻辑，导致map未填充完整。以下是不用setTimeout的解决方案：

步骤1：修改initAttributesMap，用forkJoin管理所有异步请求 #

把原本直接订阅的HTTP请求收集起来，用forkJoin等待全部完成后返回填充好的map：

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

public initAttributesMap(bObjects: BObjects[], attributesMap: Map<string, string> ): Observable<Map<string, string>> {
  const requestObservables: Observable<void>[] = [];

  bObjects.forEach(bObject => {
    if (bObject.cValues !== null) {
      bObject.cValues.forEach(cValue => {
        // 将每个HTTP请求包装成Observable，完成后更新map
        const request$ = this.myService.getValueTypes(cValue.source).pipe(
          map(possibleValues => {
            const foundValue = possibleValues.find(item => item.id === cValue.id);
            if (foundValue?.displayName) {
              attributesMap.set(cValue.attributeName, foundValue.displayName);
            }
          })
        );
        requestObservables.push(request$);
      });
    }
  });

  // 等待所有请求完成后返回填充好的map
  return forkJoin(requestObservables).pipe(
    map(() => attributesMap)
  );
}

步骤2：在调用处等待异步操作完成 #

方式一：RxJS订阅风格（推荐Angular项目使用） #

somewhereInCode() {
  const attributesMap = new Map<string, string>();
  // 传入你的bObjects数组
  this.initAttributesMap(yourBObjectsArray, attributesMap).subscribe(() => {
    // 这里的代码会在所有请求完成、map填充好后执行
    // do Other things
  });
}

方式二：async/await风格（适合习惯同步写法的场景） #

如果用RxJS 7+，推荐用firstValueFrom替代toPromise：

import { firstValueFrom } from 'rxjs';

async somewhereInCode() {
  const attributesMap = new Map<string, string>();
  // 等待所有请求完成
  await firstValueFrom(this.initAttributesMap(yourBObjectsArray, attributesMap));
  
  // 后续逻辑放心执行
  // do Other things
}

关键说明 #

• forkJoin会等待所有收集到的Observable都执行完成后才会触发后续逻辑，确保map被完全填充
• 把请求的处理逻辑放到pipe(map(...))里，而不是直接subscribe，这样能把所有请求纳入统一的异步管理
• 完全避免了setTimeout的不可靠性（比如网络慢时20ms不够的情况）

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