求助：理解async/await并解决HTTP请求执行顺序异常问题

问题根源分析 #

你的代码存在两个核心错误，直接导致执行顺序混乱和弹窗异常：

1. 服务端错误：你在games.service.ts里直接订阅了http.get请求，随后立刻执行同步代码并返回未赋值的currentGame。HTTP请求是异步操作，订阅回调里的逻辑要等请求完成才会执行，此时currentGame还是undefined，而且强制把普通对象转成Observable是完全错误的写法。
2. 组件端错误：组件调用服务后立刻执行后续两个alert——这些是同步代码，会在HTTP请求完成前就触发，此时currentGame还未被赋值，所以弹窗拿不到数据；同时服务返回的是无效Observable，后续订阅逻辑也存在问题。

修正步骤 #

1. 修复games.service.ts

不要在服务内订阅请求，而是返回处理后的Observable，把异步逻辑的控制权交给组件：

getCurrentGame(gameId: number): Observable<Game | undefined> {
  const url = `${this.gamesURLBase}/GetSingleGameInfo/${gameId}`;
  
  // 用pipe+map处理请求返回的数据，返回Observable给组件
  return this.http.get<Game[]>(url).pipe(
    map((value: Game[]) => {
      if (value.length > 0) {
        const currentGame = value.find(element => element.GameId === gameId);
        alert(`Service ---> currentGame is ${JSON.stringify(currentGame)}`);
        return currentGame;
      }
      return undefined;
    })
  );
}

说明：利用RxJS的map操作符在数据流中处理返回的数组，找到目标游戏后返回，整个逻辑保持异步，但把Observable的控制权交给组件。

2. 修复single-game.component.ts

把需要在请求完成后执行的代码放到订阅回调里（或使用async/await语法糖）：

方式一：使用订阅回调（RxJS标准写法）

getCurrentGame(): void {
  const id = Number(this.route.snapshot.paramMap.get('id'));
  alert(`first time in the single game component and the value returned is ${this.currentGame?.Name}`);
  
  // 订阅服务返回的Observable，请求完成后执行回调逻辑
  this.gamesService.getCurrentGame(id).subscribe(value => {
    this.currentGame = value;
    // 这两个alert现在会在请求完成后执行
    alert(`back in the single game component and the value returned is ${this.currentGame?.Name}`);
    alert(`we're back and now the message shows!`);
  });
}

方式二：使用async/await（语法糖写法）

如果想尝试async/await，需要把Observable转成Promise，使用Angular官方推荐的firstValueFrom：

// 先导入firstValueFrom
import { firstValueFrom } from 'rxjs';

async getCurrentGame(): Promise<void> {
  const id = Number(this.route.snapshot.paramMap.get('id'));
  alert(`first time in the single game component and the value returned is ${this.currentGame?.Name}`);
  
  // await等待请求完成，拿到结果后赋值
  this.currentGame = await firstValueFrom(this.gamesService.getCurrentGame(id));
  
  // 后续代码会在请求完成后执行
  alert(`back in the single game component and the value returned is ${this.currentGame?.Name}`);
  alert(`we're back and now the message shows!`);
}

执行顺序验证 #

修正后弹窗顺序会变为：

1. 组件：first time in the single game component.....
2. 服务：Service ---> current game is...
3. 组件：back in the single game component and the value returned is...
4. 组件：we're back and now the message shows!
   完全符合你的预期。

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