如何在另一个之后订阅 Observable答案

【问题标题】：How to subscribe Observable after another one如何在另一个之后订阅 Observable
【发布时间】：2020-11-26 01:12:46
【问题描述】：

我想在登录后获取当前登录用户但是 this.router.navigate([this.returnUrl]);不运行：我在这里做错了什么，我可以解决这个问题

onSubmit(): void {
    this.authService.login(this.loginForm.value).subscribe(next => {
    }, error => {
      this.alertService.error(error.error);
    }, () => {
      this.authService.getCurrentUser().subscribe(u => localStorage.setItem('role', u.role), error => {
        this.alertService.error(error.error);
      }, () => {
        this.router.navigate([this.returnUrl]);
      });
    });
  }

【问题讨论】：

你可以让你的方法异步

标签： angular observable

【解决方案1】：

一个好的做法是使用mergeMap 像这样链接 API 调用：

onSubmit(): void {
    this.authService.login(this.loginForm.value).pipe(
        mergeMap(() => this.authService.getCurrentUser()),
        catchError(err => this.alertService.error(err.error)),
        finalize(() => this.router.navigate([this.returnUrl]))
    ).subscribe(u => {
        localStorage.setItem('role', u.role);
    });
}

另外请注意，我直接在管道中添加了catchError，但您也可以在订阅中捕获错误，如下所示：

onSubmit(): void {
    this.authService.login(this.loginForm.value).pipe(
        mergeMap(() => this.authService.getCurrentUser())
    ).subscribe(
        u => localStorage.setItem('role', u.role),
        err => this.alertService.error(err.error),
        () => this.router.navigate([this.returnUrl])
    );
}

您的代码中的另一件重要的事情是您将导航放置在 finally 块中，这意味着您将在成功或错误的两种情况下重定向。这就是我在第一个示例中放置finalize 的原因。如果路由打算仅成功，则代码应为：

onSubmit(): void {
    this.authService.login(this.loginForm.value).pipe(
        mergeMap(() => this.authService.getCurrentUser()),
        catchError(err => this.alertService.error(err.error))
    ).subscribe(u => {
        localStorage.setItem('role', u.role);
        this.router.navigate([this.returnUrl]);
    });
}

或

onSubmit(): void {
    this.authService.login(this.loginForm.value).pipe(
        mergeMap(() => this.authService.getCurrentUser())
    ).subscribe(
        u => {
            localStorage.setItem('role', u.role);
            this.router.navigate([this.returnUrl]);
        },
        err => this.alertService.error(err.error)
    );
}

【讨论】：