Angular中Async函数await后返回Observable的问题求解

缺失的核心处理逻辑：没有对empService.getEmpUsers()返回的RxJS Observable对象做取值转换。
Angular HttpClient默认返回Observable类型，await关键字仅能等待Promise的resolve结果，直接await Observable对象不会触发Observable的订阅执行，最终拿到的就是Observable实例本身，而非接口返回的实际用户列表数据。

任选以下一种方式修改即可：

方案1：转Promise后配合async/await使用 #

RxJS 7+ 版本推荐使用firstValueFrom（取第一个返回值后自动完成）或lastValueFrom（取Observable完成前的最后一个值）将Observable转为Promise，使用前需从rxjs导入对应方法：

import { firstValueFrom } from 'rxjs';

async getUsers(): Promise<void> {
  if (this.empId) {
    this.userList = await firstValueFrom(this.empService.getEmpUsers(this.empId));
    console.log(this.userList); // 此处可拿到接口返回的实际用户列表数据
  }
}

RxJS 6及更早版本可直接调用Observable实例的.toPromise()方法实现转换：

this.userList = await this.empService.getEmpUsers(this.empId).toPromise();

方案2：直接订阅Observable取值（无需async/await） #

移除方法的async标记，直接调用Observable的subscribe方法，在回调中获取返回值赋值：

getUsers(): void {
  if (this.empId) {
    this.empService.getEmpUsers(this.empId).subscribe((res) => {
      this.userList = res;
      console.log(this.userList);
    });
  }
}

注意：使用subscribe方式时，需在组件ngOnDestroy生命周期中取消对应订阅，避免内存泄漏。

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