Generische HTTP-Fehlerbehandlung in Angular

Question

angular2-jwt bietet einen AuthHttp-Wrapper für die native Angular-HTTP-Klasse, der automatisch den http-Autorisierungsheader mit jeder Anforderung enthält. In meinen Diensten nenne ich in der Regel einen Backend api wie diese

getThings(): Observable<Thing[]> { 
    return this.http.get(environment.apiEndpoint + '/things') 
        .map(res => res.json().data) 
        .catch(res => this.handleError(res)); 
    } 

mit einem Fehler-Handler wie

private handleError(error: Response | any) { 
    let errMsg: string; 
    if (error instanceof Response) { 
    const body = error.json() || ''; 
    const err = body.error || JSON.stringify(body); 
    errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
    errMsg = error.message ? error.message : error.toString(); 
    } 
    // If JWT is expired open a new window to log in again 
    if (errMsg.indexOf('No JWT present or has expired') !== -1) { 
    window.open(environment.apiEndpoint + '/loginToApp?expired', '_blank', 'height=570,width=520'); 
    } 
    console.error(error); 
    return Observable.throw(errMsg); 
} 

Ich halte die handelte Methode in allen meinen Diensten zu wiederholen, und ich würde gerne wissen, ob es ein Weg, um dieses TROCKEN zu machen. Gibt es eine Möglichkeit, einen generischen Fehlerhandler für alle http Anfragen zu definieren?

Ich möchte vermeiden, dass Fang jedes Mal wenn möglich zu callen. Gibt es eine Möglichkeit, die HTTP-Klasse zu erweitern, um automatisch Fehler bei jeder Anfrage zu erkennen, und dann kann ich in besonderen Situationen fallweise eine benutzerdefinierte Fanglogik hinzufügen?

Ich könnte die Methode aus einer anderen Datei exportieren und in jedem meiner Dienste importieren, aber ich denke, dass es einen besseren Weg geben muss. Danke für Anregungen.

UPDATE: Ich habe am Ende die AuthHttp-Klasse von angular2-jwt erweitert.

import { Http, RequestOptions, Response, Request, RequestOptionsArgs } from '@angular/http'; 

import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/observable/throw'; 

import { AuthHttp, AuthConfig } from 'angular2-jwt'; 

export class ApiHttp extends AuthHttp { 

    public request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
    return super.request(url, options).catch(res => this.handleError(res)); 
    } 

    private handleError(error: Response | any) { 
    // error handling then rethrow the error 
    return Observable.throw(error); 
    } 
} 

Answer 1

Sie können benutzerdefinierten Service CustomAuthHttp wie AuthHTTP Wrapper erstellen. Wie Wrapper Header hinzufügt, können Sie in CustomAuthHttp Fehler abfangen. Dann injiziere in deinem Code CustomAuthHttp anstelle von AuthHTTP und verwende.

@Injectable() 
export class CustomAuthHttp { 

    constructor(private http: AuthHttpWrapper) { } 

    get(url: string) { 
    return this.http.get(url) 
     .catch(res => this.handleError(res)); 
    } 

    private handleError(error: Response | any) { 
    // your code 
    return Observable.throw(''); 
    } 
}