使用 rxjs 处理异步数据

Question

我有一个登录组件，它接收电子邮件和密码，并发出 http 请求来获取用户数据。之后，我想使用服务在其他组件中使用该用户数据。

登录组件：

  onRecievingResults(value:loginInterface){
    this.authService.saveData(value);
  }

  onLog(){
    this.onRecievingResults(this.loginUser)
    this.router.navigateByUrl('/stats/list')
  }

服务：

  public currentUser:User | null = null;

private dataUserSource = new BehaviorSubject<User | null>(this.currentUser);
  dataEmitter = this.dataUserSource.asObservable();

  public saveData(value:loginInterface){
    this.loginUser(value).subscribe()
    this.dataUserSource.next(this.currentUser);
  }

  public loginUser(loginInterface: loginInterface | null){
    const url = `${this.basicURL}/login`
    const body = {email: loginInterface?.email, password1: loginInterface?.password1}
    return this.http.post<loginResponse>(url, body)
    .pipe(
      map(({user, token}) => this.setAuthentication(token, user)),
    catchError(err => throwError(() => err.error.message))
    )
  }

  private setAuthentication( token:string, user: User){
    this.currentState = authStatus.Authenticated
    this.currentUser = user
    localStorage.setItem('token', token)
    console.log(this.currentUser) //<-- Here i have the userData
    return true
  }

我的其他服务：

  ngOnInit(): void {
    this.authService.dataEmitter.subscribe(data => console.log(data))
  }

  public currentUser:User | null = null

问题是，在组件中我想在登录应用程序后使用用户数据，我有“null”，但是在我在服务中使用的更新该数据的方法中，我可以获取用户数据。我做错了什么？

Answer 1

订阅是异步的，因此您主题上的

next()

将在

this.currentUser

更新之前被调用。

因此，您可以在订阅内发出主题。

public saveData(value:loginInterface){
    this.loginUser(value).subscribe(() =>
        this.dataUserSource.next(this.currentUser)
    );
}

另外，如果你把

map()

函数的内容移到订阅中会更清晰。