Angular中如何等待subscribe异步结果？函数返回undefined问题求解

我编写了一个从API获取用户信息的getUser函数：

getUser(){
  const token = localStorage.getItem("user");
  const tokenJson = JSON.parse(token as string);
  const email = tokenJson.user.email;
  const uid = tokenJson.user.uid;

  this.http.get(this.url + uid).subscribe((res: any) => {
    const user = {
      userId: uid,
      email: email,
      fName: res.fName,
      lName: res.lName,
    }
    return user;
  })   
}

但调用该函数时返回undefined：

console.log(this.auth.getUser());

我尝试将结果赋值给变量后直接访问，仍存在相同问题：

this.auth.getUser();
console.log(this.auth.userInfo);

仅通过setTimeout延迟访问才能得到正确结果：

this.auth.getUser();
setTimeout(() => {
   console.log(this.auth.userInfo);
}, 1000);

确认这是异步问题，请问如何正确等待subscribe的结果？最优解决方案是什么？

最优解决方案 #

你的getUser函数当前没有返回有效结果（subscribe内部的return无法传递到函数外部），且HTTP请求属于异步操作，不能直接同步获取结果。以下是两种可靠的解决方案：

方案1：返回Observable，由调用方订阅处理 #

修改getUser函数，让它返回HTTP请求的Observable，通过map操作符提前组装好用户数据，调用方通过subscribe获取结果：

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

// 函数返回Observable类型
getUser(): Observable<any> {
  const token = localStorage.getItem("user");
  const tokenJson = JSON.parse(token as string);
  const email = tokenJson.user.email;
  const uid = tokenJson.user.uid;

  return this.http.get(this.url + uid).pipe(
    map((res: any) => {
      return {
        userId: uid,
        email: email,
        fName: res.fName,
        lName: res.lName,
      };
    })
  );
}

调用方式：

this.auth.getUser().subscribe(user => {
  console.log(user); // 直接拿到组装后的用户数据
  this.auth.userInfo = user; // 如需赋值到变量，在此处操作
});

方案2：转换为Promise，配合async/await使用 #

如果更习惯Promise的写法，可以将Observable转为Promise，用async/await实现类似同步的代码逻辑：

import { firstValueFrom } from 'rxjs';

// 声明为async函数，返回Promise
async getUser(): Promise<any> {
  const token = localStorage.getItem("user");
  const tokenJson = JSON.parse(token as string);
  const email = tokenJson.user.email;
  const uid = tokenJson.user.uid;

  // 用firstValueFrom获取Observable的第一个值（即请求结果）
  const res = await firstValueFrom(this.http.get(this.url + uid));
  return {
    userId: uid,
    email: email,
    fName: res.fName,
    lName: res.lName,
  };
}

调用方式（注意调用函数需在async函数内）：

async fetchUser() {
  const user = await this.auth.getUser();
  console.log(user);
  this.auth.userInfo = user;
}

// 调用fetchUser函数
this.fetchUser();

原代码问题说明 #

• getUser函数没有外层返回语句，默认返回undefined；subscribe内部的return只是回调函数的返回值，不会影响外层函数的返回结果。
• HTTP请求是异步执行的，代码执行到console.log时，请求还未完成，因此拿不到数据；setTimeout能凑效是因为延迟了执行时间，但这种方式不可靠（网络慢时1秒可能不足以完成请求）。

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