Angular5问题：async/await返回Promise而非具体值

看起来你遇到的核心问题是混淆了Observable和Promise的异步处理方式——Angular的HttpClient.get()返回的是Observable，而你直接用async/await（这是处理Promise的语法）去等待它，导致没法拿到实际的返回值。下面给你两种可行的解决方案：

方案一：将Observable转换为Promise使用async/await #

Angular 5对应的RxJS版本支持toPromise()方法，可以把Observable转换成Promise，这样就能正常用async/await处理了。修改你的服务方法：

async getEmployees(): Promise<Employee[]> {
  // 先把Observable转成Promise，await会等待请求完成拿到数据
  const rawEmployees = await this.http.get<Employee[]>('你的接口地址').toPromise();
  
  // 用map方法替代forEach+push，更简洁高效
  return rawEmployees.map(employee => ({
    firstName: employee.firstName,
    lastName: employee.lastName,
    phone: employee.phone,
    email: employee.email,
    city: employee.address.city,
    avatar: employee.avatar
  }));
}

调用这个方法的时候，也需要在异步函数里用await：

// 组件中的调用示例
async loadEmployees() {
  try {
    const employees = await this.yourService.getEmployees();
    // 这里就能拿到具体的员工数组了
    console.log(employees);
  } catch (error) {
    // 处理请求错误
    console.error('加载员工失败:', error);
  }
}

方案二：直接使用Observable订阅（Angular推荐方式） #

Angular本身更推荐使用Observable来处理异步请求，你可以去掉async/await，直接返回Observable，然后在组件中订阅获取值：

服务方法修改： #

getEmployees(): Observable<Employee[]> {
  return this.http.get<Employee[]>('你的接口地址').pipe(
    map(rawEmployees => rawEmployees.map(employee => ({
      firstName: employee.firstName,
      lastName: employee.lastName,
      phone: employee.phone,
      email: employee.email,
      city: employee.address.city,
      avatar: employee.avatar
    })))
  );
}

组件中调用： #

// 组件中的调用示例
loadEmployees() {
  this.yourService.getEmployees().subscribe({
    next: (employees) => {
      // 这里拿到具体的员工数组
      console.log(employees);
    },
    error: (error) => {
      // 处理请求错误
      console.error('加载员工失败:', error);
    }
  });
}

为什么原来的代码拿不到值？ #

你原来的代码里，await this.http.get(...).pipe(map(...))其实并没有等待请求完成——因为http.get()返回的是Observable，不是Promise，await只会把这个Observable对象直接包装成Promise返回，而不是等待它发出请求并返回数据。所以你调用这个方法时，拿到的是一个包裹着Observable的Promise，自然取不到实际的员工数据。

内容的提问来源于stack exchange，提问作者Michael Niño