2016-09-10 6 views
1

Я реализую приложение Angular 2, которое сделает некоторые вызовы API. Мне было интересно, есть ли вообще сделать общий обработчик ошибок. Например, я хочу перенаправить пользователей на маршрут входа, если API отвечает кодом 401. Это возможно?Angular 2 Http response generic обработчик ошибок

Благодаря

ответ

7

Я создал вспомогательный метод HTTP, который я использую от всех моих услуг. Это, по крайней мере, централизует всю активность http через приложение.

Обработка детали ошибки иногда, хотя - см мой вопрос здесь: Angular 2 http service. Get detailed error information

UPD: 2016-09-12 - Fixed remove метод. Угловой сервис 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); 
    } 
} 
+0

Что происходит, если, например, компонент вызывает ваш 'JsonHttpHelper', реализующий свою собственную функцию' catch'. Что будет называться? Или что будет называться первым? –

+0

Помощник будет первым, но он повторит ошибку, чтобы вы также получили ее в компоненте. – rook

+1

Я думаю, что это не повторяет. Я реализовал что-то подобное и когда вызывается 'catch' в помощнике. Вызывается только 'then' в вызывающем абоненте, если я не выношу ошибку вручную в помощнике или лучше (для моего случая) не бросаю что-то еще. Но этот ответ решает мою проблему. Спасибо –

Смежные вопросы