angular2 - 同じ応答エラーを複数回処理する

Question

私はangle2アプリケーションを構築しています。 httpサービスが組み込まれた角度の前にすべてのリクエストを処理するHttpClientというグローバルサービスがあります。また、このサービスは、ステータスコードをチェックして、すべての私の応答エラーを処理します。私はからのエラーをしたくない。この場合、

import { Component, Input, OnInit, OnDestroy } from '@angular/core'; 
import { Router } from '@angular/router'; 

import { Login } from '../../core/classes/login/login' 

import { AuthenticationProvider } from '../../providers/authentication/authentication.provider' 
import { MessageProvider } from '../../providers/message/message.provider' 

@Component({ 
    selector: 'my-login', 
    templateUrl: 'app/components/login/login.component.html' 
}) 
export class LoginComponent implements OnInit, OnDestroy { 

    @Input() login: Login; 
    error: any; 

    constructor(
    private authProvider: AuthenticationProvider, 
    private route: Router, 
    private messageProvider: MessageProvider) { } 

    ngOnInit() { 
    this.login = new Login(); 
    } 

    ngOnDestroy() { 
    this.messageProvider.setDefault(); 
    } 

    onSubmit() { 
    this.authProvider.login(this.login) 
     .then(auth => { 
      if (this.authProvider.isAdmin()) 
       this.route.navigateByUrl('admin/users'); 

      else if (this.authProvider.isLoggedIn()) 
       this.route.navigateByUrl('/'); 
      }) 
      .catch(error => {console.log(error);}); 
    } 
} 

：今

import { Injectable } from '@angular/core'; 
import { Headers, Http, Response, } from '@angular/http'; 

import { MessageProvider } from '../../providers/message/message.provider' 

@Injectable() 
export class HttpClient { 

    private webApi = 'http://localhost:8080/api/v1/'; 

    constructor(
     private http: Http, 
     private messageProvider: MessageProvider) { } 

    get(url: string): Promise<Response> { 
     return this.http.get(this.webApi + url, {headers: this.createAuthorizationHeader()}) 
         .toPromise() 
         .catch(this.handleError.bind(this)); 
    } 

    post(url: string, data: Object): Promise<Response> { 
     return this.http.post(this.webApi + url, data, {headers: this.createAuthorizationHeader()}) 
         .toPromise() 
         .catch(this.handleError.bind(this)); 
    } 

    put(url: string, data: Object): Promise<Response> { 
     return this.http.put(this.webApi + url, data, {headers: this.createAuthorizationHeader()}) 
         .toPromise() 
         .catch(this.handleError.bind(this)); 
    } 

    delete(url: string): Promise<Response> { 
     return this.http.delete(this.webApi + url, {headers: this.createAuthorizationHeader()}) 
         .toPromise() 
         .catch(this.handleError.bind(this)); 
    } 

    private handleError (error: any) { 

     var status: number = error.status; 

     if(status == 401) { 
      this.messageProvider.setMessage(error); 
      this.messageProvider.message.text = "You have to be logged in to reach this page."; 
     } 


     let errMsg = (error.message) 
      ? error.message 
      : status 
       ? `${status} - ${error.statusText}` 
       : 'Server error'; 

     console.error(errMsg); // log to console instead 

     return error; 
    } 

    private createAuthorizationHeader() { 

     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     headers.append('Accept', 'application/json'); 

     if (localStorage.getItem('token')) 
      headers.append('Authorization', 'Bearer ' + localStorage.getItem('token')); 

     return headers; 
    } 
} 

を、呼び出し側コンポーネントは、ログインについてだったふりをすることができますHttpClient（「このページにアクセスするにはログインする必要があります」）が表示されますが、「ユーザーが見つかりません」などのカスタマイズされたメッセージが表示されます。私は、次のような何かを行うことができることを知っているが、エラーはもうありません。

onSubmit() { 
    this.authProvider 
     .login(this.login) 
     .then(auth => { 
      if (this.authProvider.isAdmin()) 
       this.route.navigateByUrl('admin/users'); 

      else if (this.authProvider.isLoggedIn()) 
       this.route.navigateByUrl('/'); 
      }) 
      .catch(error => { 
       var status: number = error.status; 

       if(status == 401) { 
        this.messageProvider.setMessage(error); 
        this.messageProvider.message.text = "No user found."; 
       } 
      }); 
} 

だから多分HttpClientを内キャッチ（）関数内で別のエラーを発生させる方法はありますか？だから、私は再びLoginComponentでエラーを処理することができます。

Answer 1

私はあなたのエラーを本質的に "マップ"するためにcatchメソッドを投げることができると思います。

var obs = Observable.of(12); 
    obs.map((value) => { 
    throw "blah"; 
    }).catch((error) => { 
    if(error === "blah") { 
     throw "baz"; 
    } else { 
    return Observable.of("Hello"); 
    } 
    }).subscribe((value) => { 
    console.log("GOOD: " + value); 
    }, (error) => { 
    console.log("ERR: " + error); 
    }); 
    //Logs ERR: baz 

：あなたもあなたの messageProviderを更新したいなら、あなたは...この例で確認

.catch(error => { 
    var status: number = error.status; 
    var newError = {}; 
    if(status == 401) { 
     this.messageProvider.setMessage(error); 
     this.messageProvider.message.text = "No user found."; 
     newError.errorMessage = "No user found."; 
    } 
    throw newError; 
}); 

を行うことができます