在 RxJS TypeScript (Angular 2) 中正确捕获值答案

【问题标题】：Catch values correctly in RxJS TypeScript (Angular 2)在 RxJS TypeScript (Angular 2) 中正确捕获值
【发布时间】：2017-04-26 13:35:38
【问题描述】：

我正在学习 Angular2，来自 Angular 1.x 的多年开发。我遇到了RxJS 的一些问题，尤其是如何捕获和处理错误。在我的示例中，我尝试通过将 Facebook 访问令牌传递给我们自己的 API 来验证用户身份。这在工作时效果很好，但我似乎无法让错误处理按我期望的方式工作。

方法调用层次如下

SignInComponent.facebookLoginResponse
    => AuthService.facebookLogin
        => APIService.Post

当服务器返回错误（状态码 4xx）时，我希望客户端映射错误并在我的 SignInComponent 错误处理块中捕获它。相反，控制台向我显示以下错误（从未调用过 ErrorHandler.handle）：

-> EXCEPTION: [object Object]                core.umd.js:3488
-> Uncaught > Object {errors: Array[1]}      Subscribe.ts:241

下面是相关sn-ps的代码

export class SignInComponent{
    ...
    public facebookLoginResponse(response : FB.LoginStatusResponse){
        if (response.status == "connected"){
            let observable = this.auth.facebookLogin(response.authResponse.accessToken);

            observable.subscribe(() => {
                this.router.navigate(['influencer']);
            }, (error : ErrorResponse) => {
                ErrorHandler.handle(error, "Couldn't log in due to the following reasons:");
            });
        }
    }
    ...
}

export class Auth{
    ...
    facebookLogin(accessToken : String) : Observable<AuthResponse>{
        let observable = this.api.Post<AuthResponse>("influencer/auth/facebook", {
            token: accessToken
        });

        observable.subscribe((response : AuthResponse) => {
            Auth.handleAuthSuccess(response, SessionType.Influencer);
        });

        return observable;
    }
    ...
}

export class API{
    ...
    public Post<T>(path : String, postData) : Observable<T>{
        return this.http.post(this.basePath + path, postData)
            .map((response : Response) => {
                return API.extractData<T>(response);
            })
            .catch(API.handleError)
            .share();
    }

    private static extractData<T>(response : Response) : T{
        return <T>response.json();
    }

    private static handleError (error: Response) {
        let errorResponse : ErrorResponse;
        ...
        return Observable.throw(errorResponse);
    }
    ...
}

API.Post 中的 share 调用似乎破坏了错误处理。但是，如果没有它，请求的发送次数与我们订阅 observable 的次数一样多（在本例中为两次）。我应该如何正确地做到这一点？

【问题讨论】：

标签： angular typescript rxjs observable

【解决方案1】：

不确定以下是否适用于您的情况，但在大多数情况下，在编写顺序进程时不需要将流“拆分”为多个订阅（在大多数情况下这应该没有问题，因为无论如何只有 1 个线程)，在您的情况下，请尝试删除 share() 并使用以下内容：

export class Auth {
    ...
    facebookLogin(accessToken : String) : Observable<AuthResponse>{
        return this.api.Post<AuthResponse>("influencer/auth/facebook", {
            token: accessToken
        })
        .do((response : AuthResponse) => Auth.handleAuthSuccess(response, SessionType.Influencer));
    }
    ...
}

【讨论】：