Angular 在返回数据之前等待订阅完成

Question

您好，有一个非常简单的函数调用端点来检索我的用户，我在标题中使用它来显示连接的用户，但不想在每次呈现标题时调用端点。

所以我正在尝试这样的事情:

public getUser(): User {
    if (!this.user) {
     
      this.http.get<User>(environment.apiRoot + '/me').subscribe(res => {
        this.setUser(res);
        return this.user.value;
      }, err => {

      });
    } else {
      return this.user.value;
    }
  }

使用 setUser功能:

public setUser(u: User): void {
    if (!this.user) {
      this.user = new BehaviorSubject(u);
    } else {
      this.user.next(u);
    }
  }

还有 BehaviorSubject : private user: BehaviorSubject<User>;

在我的标题组件中，我在 ngOnInit 中这样调用它:

this.user = this.appState.getUser();
console.log(this.user);

但是console.log中的用户总是未定义，为什么不等待getUser中的订阅功能？

Answer 1

您有一个异步函数，您正在使用混合响应式(Reactive)和命令式编程来调用该函数。对于异步函数，您应该坚持使用响应式方法，而不是尝试确定某个代码何时完成，而只是等待它完成，然后调用回调或负责的处理程序。

在您的代码中，getUser()函数是 async函数，因为你有内部 http.get()称呼。 http.get()将返回 Observable , 你 subscribe不必要地进入你的函数。你应该做的是返回内部 observable来自函数，subscribe你真正需要它的地方。

我们可以重写您的getUser如下所示的函数(请注意，不需要命令式 setUser -function)

public getUser(): Observable<User> {
    return this.http.get<User>(environment.apiRoot + '/me');
}

并在你的外部范围内订阅它

this.appState.getUser().subscribe(user => {
    console.log(user)
});

更进一步，这也使得在模板中使用 observable 变得更加容易。

假设您将返回的 observable 分配给变量 user$ ，您甚至不必订阅它!

让用户喜欢

this.user$ = this.appState.getUser();

获取您的 observable，然后在您的模板中使用 async管道让 Angular 自动订阅和取消订阅。

<span>Hello, my name is {{user$ | async}}!</span>