调用返回 Observable 而不是实际对象答案

【问题标题】：Call returns Observable instead of actual object调用返回 Observable 而不是实际对象
【发布时间】：2021-01-25 04:39:03
【问题描述】：

我对@987654321@ 的调用不断返回一个 Observable 对象而不是实际的数据对象 - 有人知道如何解决它吗？

仪表板组件

this.dashboardFacade.getCurrentUserUid().then((uid) => {
  if (uid) {
    this.dashboardFacade.getCurrentUser(uid).then((user) => console.log(user));
  }
});

仪表板外观

  getCurrentUser(uid: string): Promise<unknown> {
    return this.userService.getUser(uid);
  }

用户服务

  getUser(uid: string): Promise<unknown> {
    return firebase
      .auth()
      .currentUser.getIdToken()
      .then((token: string) => {
        this.logger.debug(`Token generated: ${token}`);
        return this.httpClient
          .get(`${environment.apiBasePath}/users`, {
            headers: { authorization: `Bearer ${token}` },
          })
      });
  }

尝试做：

this.dashboardFacade.getCurrentUserUid().then(uid => {
  if(uid) {
    this.dashboardFacade.getCurrentUser(uid).subscribe(
     (user) => console.log(user)
    )
  }
});

抛出以下错误：

Uncaught (in promise): TypeError: this.dashboardFacade.getCurrentUser(...).subscribe is not a function TypeError: this.dashboardFacade.getCurrentUser(...).subscribe is not a function in DashboardComponent

【问题讨论】：

当你进行 HTTP 调用时，它会返回一个 observable。你可以尝试使用 observable 而不是 promise。看看这是否有效，让我知道..
因此您可以将该可观察对象转换为承诺或简单地用作可观察对象
将鼠标悬停在 then 语句上。告诉我们它的返回类型。这就是问题所在。
我认为问题出在getUser(uid: string)，它返回一个 Promise 而不是 Observable

标签： javascript angular typescript observable subscription

【解决方案1】：

在 javascript 中，您拥有我们所说的 Promise Chain。当我承诺返回一个 Promise 时会发生这种情况，中间的承诺是不可见的，你会收到链中最后一个已解决的承诺的结果。

你的方法 getUser 返回一个 Promise，但是这个 Promise 实际上不返回另一个 Promise 而是一个 Observable，在这种情况下链 Promise 不涉及并且你收到一个 Observable。如果您不需要 observable，您可以做什么来转换您的方法以实际返回 Promise：

  getUser(uid: string): Promise<unknown> {
    return firebase
      .auth()
      .currentUser.getIdToken()
      .then((token: string) => {
        this.logger.debug(`Token generated: ${token}`);
        return this.httpClient
          .get(`${environment.apiBasePath}/users`, {
            headers: { authorization: `Bearer ${token}` },
          }).toPromise();                       <<<< transform to observable as promise
      });
  }

关于你的错误，这也是“正常的”

this.dashboardFacade.getCurrentUserUid().then(uid => {
  if(uid) {
    this.dashboardFacade.getCurrentUser(uid).subscribe(
     (user) => console.log(user)
    )
  }
});

this.dashboardFacade.getCurrentUser(uid) 实际上返回的是（Observable 的）Promise 而不是 Observable，因此您需要等待 Promise 解决后再订阅

可能是这样的（如果您在 getUser 方法中保持可观察性）

this.dashboardFacade.getCurrentUserUid().then(uid => {
  if(uid) {
    this.dashboardFacade.getCurrentUser(uid).then(currentUserOsb => {
        currentUserObs.subscribe(user => console.log(user));
    });
  }
});

【讨论】：