Angular 如何将 await 与 .subscribe 一起使用答案

【问题标题】：Angular how do I use await with .subscribeAngular 如何将 await 与 .subscribe 一起使用
【发布时间】：2021-10-13 15:47:44
【问题描述】：

我目前正在构建一个路由守卫来检查我的客户端是否经过身份验证。因为我只使用 http cookie，所以我必须向我的服务器发送一个请求，然后返回该 cookie 是否有效。这是我的守卫的代码：

export class AuthGuard implements CanActivate {
  constructor (private auth: AuthService){}
  
  async canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Promise<boolean> {

      let isAuthenticated : boolean = false;
      
      await this.auth.getAuthStatus().subscribe(
        res => {
          if(res.status == 200){
            isAuthenticated = true;
          }
      })
      console.log(isAuthenticated)
      return isAuthenticated;
  }
}

服务只是一个简单的http调用：

  getAuthStatus(): Observable<HttpResponse<any>>{
    return this.http.post(environment.server + environment.routes.authRoutes.status, "", {
      withCredentials: true,
      observe: 'response'
    })
  }

我面临的问题是我的守卫必须为路由器返回一个布尔值，并且由于我使用 .subscribe 它返回 false，因为它在我 .subscribe 完成之前返回 siAuthenticated。我尝试添加等待并返回一个承诺，但它在我的情况下不起作用或者我没有正确使用它。我尝试在不同的帖子中找到解决方案，但没有一个对我有用（或者我只是没有正确理解它们并以错误的方式实施它们）。

谢谢

【问题讨论】：

简短回答，不要。而是返回一个 observable。

标签： angular rxjs angular-guards

【解决方案1】：

await 需要一个Promise 所以你可以使用Observable 的toPromise() 方法并更改getAuthStatus() 的返回类型。

但正如评论中提到的@ShamPooSham，我还建议从警卫处返回Observable，而不是Promise。

getAuthStatus(): Promise<HttpResponse<any>>{
    return this.http.post(environment.server + environment.routes.authRoutes.status, "", {
      withCredentials: true,
      observe: 'response'
    }).toPromise()
  }


await this.auth.getAuthStatus().then(res => {...})

【讨论】：

谢谢，如果可行，我会实施它并将您的问题标记为已解决。你介意解释一下为什么在这种情况下 observable 会比 promise 更好吗？
当然。这是您希望您的应用程序如何的选择。我个人更喜欢 observables 让应用程序更具反应性，而不是等待承诺返回一个值，我认为这违反了异步模式。它有助于避免回调混乱。而且我发现它更直观、更易读。

【解决方案2】：

对于较新的 RxJS 版本，您可以编写

const response = await lastValueFrom(this.auth.getAuthStatus());

对于老年人

const response = await this.auth.getAuthStatus().toPromise();

【讨论】：

我想从 'rxjs' 导入 { lastValueFrom } 但显然 rxjs '没有 exportet 成员'