Angular 2 Http 响应通用错误处理程序

Question

我正在实施一个 Angular 2 应用程序，它将进行一些 API 调用。我想知道是否有制作通用错误处理程序的方法。例如，如果 API 以 401 代码响应，我想将用户重定向到登录路由。这可能吗？

谢谢

Answer 1

我创建了一个 http 帮助程序方法，我在所有服务中都使用它。这至少通过应用程序集中了所有 http activity。

虽然有时会处理错误详细信息 - 请在此处查看我的问题：

UPD：2016-09-12 - 修复了 remove 方法。 Angular http 服务需要定义正文。此方法存在的原因 - 我希望能够将正文作为 delete 请求的一部分传递，而 Angular 的方法不允许这样做。

import {Injectable} from '@angular/core';
import {Http, Request, Response, Headers, RequestOptionsArgs, RequestMethod} from "@angular/http";
import {RequestArgs} from "@angular/http/src/interfaces";
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class JsonHttpHelper {
    protected headers: Headers;

    constructor(private _http: Http) {
        this.headers = new Headers();
        this.headers.append('Content-Type', 'application/json');
        this.headers.append('Accept', 'application/json');
    }

    get(url:string) : Observable<any> {
        return this._http.get(url)
            .map((res: Response) => res.json())
            .catch(this.handleError);
    }

    post(url:string, data:any, args?: RequestOptionsArgs) : Observable<any> {
        if (args == null) args = {};
        if (args.headers === undefined) args.headers = this.headers;

        return this._http.post(url, JSON.stringify(data), args)
            .map((res: Response) => JsonHttpHelper.json(res))
            .catch(this.handleError);
    }

    put(url:string, data:any, args?: RequestOptionsArgs) : Observable<any> {
        if (args == null) args = {};
        if (args.headers === undefined) args.headers = this.headers;

        return this._http.put(url, JSON.stringify(data), args)
            .map((res: Response) => JsonHttpHelper.json(res))
            .catch(this.handleError);
    }

    remove(url: string, data?: any, args?: RequestOptionsArgs): Observable<any> {
        if (args == null) args = {};

        args.url = url;
        args.method = RequestMethod.Delete;
        if (!args.headers) args.headers = this.headers;
        args.body  = data ? JSON.stringify(data) : null;

        return this._http.request(new Request(<RequestArgs>args))
            .map((res: Response) => JsonHttpHelper.json(res))
            .catch(this.handleError);
    }

    private static json(res: Response): any {
        return res.text() === "" ? res : res.json();
    }

    private handleError(error:any) {
        console.error(error);
        return Observable.throw(error);

        // The following doesn't work.
        // There's no error status at least in case of network errors.
        // WHY?!
        //
        // if ( error === undefined) error = null;
        // let errMsg = (error && error.message)
        //     ? error.message
        //     : (error && error.status)
        //         ? `${error.status} - ${error.statusText}`
        //         : error;
        //
        // return Observable.throw(errMsg);
    }
}

Angular 2 Http 响应通用错误处理程序

Angular 2 Http response generic error handler

angular-http

angular