Angular-嵌套订阅处理错误处理 - 链多个api calls

Question

我正在构建一个具有登录/注册流的角度应用程序，并且ATM我正在寻找一种简单，更可读的方法来编码以下内容：

register() {
    this.accountService.register(this.user, this.password, this.passwordConfirmation).subscribe(() => {
        this.accountService.login(this.user.email, this.password).subscribe((loginResult) => {
            this.accountService.csrfRefresh().subscribe(() => {
                if (loginResult.status === ELoginStatus.success) {
                    this.router.navigateByUrl(this.returnUrl);
                } else {
                    this.errorMessage$.next('Login unsuccessful');
                }
            }, () => {
                this.errorMessage$.next('Login unsuccessful');
            })
        }, () => {
            this.errorMessage$.next('Login unsuccessful');
        })
    }, () => {
        this.errorMessage$.next('Login unsuccessful');
    });
}

使用此代码，我需要编写4次错误处理代码，或创建单独的代码方法，或将数据传递到caping ubibject。这似乎很迟钝。

我一直在考虑使用等待：

async register() {
    try {
        await this.accountService.register(this.user, this.password, this.passwordConfirmation).toPromise();
        const loginResult = await this.accountService.login(this.user.email, this.password).toPromise();
        await this.accountService.csrfRefresh().toPromise();

        // TS2532: Object is possibly 'undefined'
        if (loginResult!.status === ELoginStatus.success) {
            this.router.navigateByUrl(this.returnUrl);
        } else {
            this.errorMessage$.next('Login unsuccessful');
        }
    } catch (exception) {
        this.errorMessage$.next('Login unsuccessful');
    }
}

这要好得多，但是我希望避免async/等待，并且需要使用。 topromise（）在可观测值上。

链接这3个API通话的推荐方法是什么？

Answer 1

您应该能够以更惯用的rxjs方式重写此逻辑

register() {
    this.accountService.register(this.user, this.password, this.passwordConfirmation).pipe(
      concatMap(() => this.accountService.login(this.user.email, this.password)),
      concatMap((loginResult) => {
        if (loginResult.status === ELoginStatus.success) {
           return this.router.navigateByUrl(this.returnUrl)
        }
        throw new Error("Login unsuccessful")
      })
    )
    .subscribe({
      next: data => {
            // process any result in case of success
            },
      error: () => this.errorMessage$.next('Login unsuccessful')
    })
}

，因为您需要在需要concatmap时使用concatmap，因为concatmap，意味着我们要等待上一个呼叫的响应，然后再移至第二个。

是正确的操作员，如果我们想在新请求中“杀死飞行请求”。

switchmap 它带有其自身的复杂性

。