当 map 中有另一个请求时，RxJs 处理错误

Question

我有登录服务，使用方式如下：

// LoginComponent
    this.authService.loginDb(credentials)
          .subscribe(() => {
              this.router.navigate(['/dashboard']);
            },
            (error) => {
              this.errorMessage = error.description
            });

//auth.service
public loginDb(credentials: Credentials): Observable <any> {
    //make call to third party API
    return this.auth0.client.login({
            ...
        })
        .map((resp) => {
            // here decode token and then make another request to my server for saving user
            this.token = <Token> this.jwtHelper.decodeToken(resp.idToken);
            return this.userService.createOrUpdateUser(this.token)
                .subscribe(() => {
                    this.localStorageService.set('token', resp.idToken);
                    this.localStorageService.set('decoded_token', this.token);
                    this.loggedIn = true;
                })
        })
}

问题是，例如我的服务器出现错误，this.userService.createOrUpdateUser 失败，然后 error 将无法在 LoginComponent 中处理此问题。所以，我也希望 error 处理内部请求。此外，我看到 subscribe 在第二个请求完成之前被调用。

我相信在 rxjs 中有一些运算符可以做到这一点，但我找不到它。

Answer 1

如果您将 map() 替换为 concatMap()，它将等待其内部 Observable 完成。此外，如果内部 Observable 发出错误，它将沿着链传播。

通常尽量避免嵌套 subscribe() 调用。

public loginDb(credentials: Credentials): Observable <any> {
    //make call to third party API
    return this.auth0.client.login({
            ...
        })
        .do(resp => {
            this.localStorageService.set('token', resp.idToken);
            this.localStorageService.set('decoded_token', this.token);
        })
        .concatMap((resp) => {
            // here decode token and then make another request to my server for saving user
            this.token = <Token> this.jwtHelper.decodeToken(resp.idToken);
            return this.userService.createOrUpdateUser(this.token);
        })
        .do(() => {
            this.loggedIn = true;
        });
}

A 使用两个 do() 来执行一些副作用，但也许在您的特定用例中您不需要它们或以不同的方式使用它们。

当 map 中有另一个请求时，RxJs 处理错误

RxJs Handle error when there is another request inside map

rxjs

rxjs5

angular