时间戳

首页 > 解决方案 > Firebase 身份验证 RxJs 的嵌套排气映射和连接映射

angular - Firebase 身份验证 RxJs 的嵌套排气映射和连接映射

问题描述

我正在尝试实现 Firebase 身份验证并将接收到的用户数据发送到服务器以在我的应用中创建帐户。

这是代码：

  ngAfterViewInit(): void {
    const provider = new firebase.auth.GoogleAuthProvider();
    fromEvent(this.LoginWithGoogle.nativeElement, 'click')
      .pipe(
         exhaustMap(() =>
           from(this.afAuth.signInWithPopup(provider)).pipe(
              map((data) => data.user),
              concatMap((user) =>
                this.authService.loginWithGoogle({
                   email: user.email,
                   username: user.displayName,
                })
              )
           )
         )
       )
       .subscribe((res) => {
           console.log(res);
       });
  }

它运作良好。但是像这样使用嵌套的 RxJs 运算符是否正确？这种情况有什么替代解决方案吗？

标签： angularfirebaserxjsfirebase-authenticationobservable

解决方案

我认为这会起作用：

ngAfterViewInit(): void {
  const provider = new firebase.auth.GoogleAuthProvider();
  
  fromEvent(this.LoginWithGoogle.nativeElement, 'click')
    .pipe(
        exhaustMap(() => from(this.afAuth.signInWithPopup(provider))),
        map((data) => data.user),
        concatMap((user) => this.authService.loginWithGoogle({ 
            email: user.email,
            username: user.displayName,
          })
        )
      )
      .subscribe((res) => {
          console.log(res);
      });
}

当您使用自动处理内部 observablesswitchMap之类的运算符时exhaustMap，您可以简单地想象mergeMap，与其手动订阅回调返回，不如让该工作由运算符完成。除此之外，内部 observable发出的值会传递给外部 observable（大多数时候 - 主流）。这就是为什么我能够在保存级别上使用.concatMapmapexhaustMap

编辑

如果你还想处理内部 observables 中的错误，你可以使用这样的东西：

exhaustMap(() => from(...).pipe(catchError(() => EMPTY)))

推荐阅读