将 Observable.subscribe() 返回的值分配给 const答案

【问题标题】：Assign value returned by Observable.subscribe() to a const将 Observable.subscribe() 返回的值分配给 const
【发布时间】：2019-08-05 15:21:50
【问题描述】：

我正在尝试从 Ionic4-Angular 前端向我的 Django API 发送请求，问题是我还没有熟悉这种技术甚至 javascript。在下面的代码中，我试图返回订阅数据并将其分配给 const。

async getUserLogged() {
    const tkn = await this.authService.getToken();
    const user = await this.http
      .post('http://localhost:8000/api/getuser/', {
        token: tkn
      })
      .subscribe(response => {
        console.log(response);
        return response;
      });
    console.log(user);

    return user;
  }

第一个 console.log 包含我正在搜索的真实对象。但是，第二个打印一个订阅者对象。谁能解释一下这种行为以及如何解决它

【问题讨论】：

就是这样，你在订阅中访问响应。如果没有.subscribe()，您将在没有真正执行它的情况下声明该管道。
这就是让流点击我的原因：gist.github.com/staltz/868e7e9bc2a7b8c1f754
我回答了一个类似的问题here。构建流时，仅在需要数据的最后订阅（通常在组件中）。在中间函数（例如 Angular 服务中的方法）中处理 Observable 时，只需使用运算符转换 Observable 数据，不要订阅这些函数中的 Observable。

标签： javascript angular ionic4

【解决方案1】：

我将如何设置此方法：

getUserLogged() {
  return this.authService.getToken().pipe(
    switchMap(tkn=> {
      return this.http.post('http://localhost:8000/api/getuser/', {
        token: tkn
      })
   })
  );
}

然后您可以按如下方式使用此方法：

getUserLogged().subscribe(userData => console.log(userData));

此方法使用switchMap 运算符，该运算符仅在authService.getToken 返回令牌时调用http.post。您可以找到所有RxJs 运算符here 的文档。

【讨论】：

【解决方案2】：

subscribe 的回调函数不能返回任何值给user。正如你提到的，它只得到Subscriber 对象，这是可观察的结果。

如果要使用async、await 方法，则需要使用toPromise 方法将可观察到一个promise。

async getUserLogged() {
    const tkn = await this.authService.getToken();
    const user = await this.http
      .post('http://localhost:8000/api/getuser/', {
        token: tkn
      }).toPromise();
    console.log(user);

    return user;
  }

【讨论】：

这可行，但我还是不太明白，你的意思是还有另一种使用 observables 的方法吗？
这是另一种使用 Promise 的方式。如果要使用 observables，则需要更改 getUserLogged in 的使用逻辑。

【解决方案3】：

将您的可观察响应转换为承诺，可以轻松地从您需要的地方调用。

const getUserLogged = () => {
    const tkn = await this.authService.getToken();
    return this.http
      .post('http://localhost:8000/api/getuser/', {
        token: tkn
      })
      .toPromise();
};

const someOtherFunc = async () => {
  const user = await getUserLogged();
  console.log({ user });
};

【讨论】：

Angular 的 HttpClient 默认返回 observables。
不用重新发明轮子，rxjs自带toPromise。