angular2 - gleiche Antwort mehrfach bearbeiten

Question

Ich baue eine angular2 App. Ich habe einen globalen Service namens HttpClient, der alle Anfragen behandelt, bevor angulars eingebauter http-Service gefeuert wird. Auch dieser Service kümmert sich um alle meine Antwort Fehler, die durch die Statuscodes überprüft:

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; 
    } 
} 

Nun lässt die anrufende Komponente war über Login vorgeben:

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);}); 
    } 
} 

In diesem Fall möchte ich nicht den Fehler aus der HttpClient ("Sie müssen eingeloggt sein, um diese Seite zu erreichen."), aber eine individuellere Nachricht wie "Kein Benutzer gefunden". Ich weiß, dass ich so etwas wie das folgende tun könnte, aber es ist kein Fehler mehr:

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."; 
       } 
      }); 
} 

So ist es eine Möglichkeit, vielleicht einen anderen Fehler in der catch() Funktion innerhalb der Httpclient zu verursachen? So kann ich den Fehler in meiner LoginComponent erneut behandeln.

Answer 1

Ich denke, dass Sie die Fangmethode einwerfen können, um Ihren Fehler im Wesentlichen "abzubilden". Wenn Sie wollen auch Ihre messageProvider aktualisieren dann könnten Sie tun ...

.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; 
}); 

mit diesem Beispiel Bestätigt:

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