Angular 5中同步循环内异步调用的阻塞执行问题

首先明确说：完全不需要用EventEmitter！EventEmitter是Angular专门给组件的@Output()设计的，用来在组件间传递事件，服务内部处理异步逻辑用它属于误用，咱们用Promise+async/await或者RxJS Observable就够了，这才是处理这类异步串行逻辑的正确姿势。

你遇到的核心问题是：同步for循环不会等待内部的异步调用完成就继续迭代，因为异步操作会进入单独的任务队列，主线程不会阻塞。要让循环“等待”异步完成，得把循环改成异步串行执行的方式，下面给你两种具体的实现方案，根据你的异步调用返回类型选就行：

方案一：如果异步调用返回Promise（比如自定义的异步方法） #

把你的方法改成async函数，然后在循环内部用await等待异步调用完成，这样每次迭代都会等当前异步执行完才会进入下一次：

// 假设你的异步调用是这个方法，返回Promise
private someAsyncHeroCall(heroType: string): Promise<string> {
  // 模拟异步操作，比如HTTP请求或者其他耗时任务
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(`display_${heroType}`);
    }, 1000);
  });
}

private async mapHeroTypeToDisplayHeroType(heroList: TroopsHeroesAndSpellType[]) {
  // 用for...of循环配合await实现串行等待
  for (const hero of heroList) {
    // 等待当前异步调用完成，再赋值和进入下一次循环
    const displayType = await this.someAsyncHeroCall(hero.type);
    hero.displayType = displayType;
  }
  
  // 到这里所有异步调用都已经完成，heroList的displayType都已赋值
  console.log('所有英雄类型映射完成');
}

调用这个方法的时候，如果需要等待它完成后再执行后续逻辑，也要用await或者.then()：

async processHeroes() {
  const heroList = [/* 你的英雄列表 */];
  await this.mapHeroTypeToDisplayHeroType(heroList);
  // 这里可以安全地使用处理后的heroList
}

方案二：如果异步调用返回Observable（比如Angular HttpClient的请求） #

Angular大部分异步操作（比如HTTP请求）都是返回Observable的，这时候用RxJS的concatMap操作符可以实现串行执行——也就是一个异步完成后再执行下一个：

import { from, concatMap, tap } from 'rxjs';

// 假设你的异步调用是HttpClient的请求，返回Observable
private someObservableHeroCall(heroType: string) {
  return this.http.get<string>(`/api/hero-display-type/${heroType}`);
}

private mapHeroTypeToDisplayHeroType(heroList: TroopsHeroesAndSpellType[]) {
  // from把数组转成Observable流，每次发射一个hero
  return from(heroList).pipe(
    // concatMap确保前一个Observable完成后，才处理下一个hero
    concatMap(hero => {
      return this.someObservableHeroCall(hero.type).pipe(
        // tap用来给hero赋值，不改变流的数据
        tap(displayType => {
          hero.displayType = displayType;
        })
      );
    })
  ).subscribe({
    complete: () => {
      // 所有异步操作完成后的回调
      console.log('所有英雄类型映射完成');
    },
    error: (err) => {
      // 处理错误
      console.error('映射失败:', err);
    }
  });
}

为什么不用EventEmitter？ #

再强调一遍：EventEmitter本质是一个Observable，但它的设计意图是组件间的事件传递（比如子组件向父组件发消息），服务内部用它不符合Angular的设计规范，而且完全没必要——Promise和RxJS Observable已经能完美解决异步串行的问题了。

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