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

Question

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

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 包含我正在搜索的真实对象。但是，第二个打印订阅者对象。任何人都可以向我解释这种行为以及如何解决它

Answer 1

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

如果你想使用async、await方法，你需要使用toPromise方法来创建一个可观察的承诺。

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;
  }

Answer 2

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

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 });
};

Answer 3

以下是我将如何设置此方法：

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 operator that only calls http.post once authService.getToken returns the token.You can find the documentation to all RxJs operators here。

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

Assign value returned by Observable.subscribe() to a const

javascript

angular

ionic4