2017-02-23 1 views
1

Ich bin neu in angular2 und ich meine http-Anfragen wie folgt aus:Ionic Angular: Erstellen generic http Fehlerhandler

this.http.get(...).map(res=>res.json()).subscribe(data=>{ 
    //..do something 
},err=>{ 

    if(err.status == 400){ 
     this.presentToast('Validation error'); 
    }else if(err.status == 403){ 
     this.presentToast('Authorization error'): 
    }else if(err.status == 500){ 
     this.presentToast('Something wrong with server'); 
    }else ... 
}); 

ich eine benutzerdefinierte Nachricht für jeden der gemeinsamen Statuscodes wollten die Benutzer verstehen können, aber das Problem ist, schreibe ich diese , wenn und sonst Blöcke zu jeder HTTP-Anfrage, die ich tun, und in jeder ts-Datei habe ich, so grundsätzlich ich ToastController in jeder ts-Datei importieren und schreibe die presentToast Funktion.

Gibt es trotzdem einen generischen Fehlerhandler, der so eingerichtet ist, dass er die benutzerdefinierten Regeln/Nachrichten als Toast darstellt und es DRY macht?

+0

einfach einige Global-Service erstellen und jede HTTP-Anfrage von dort aufrufen, damit Sie in der Lage sein werden, globale Fehlerhandler-Nachrichten sowie Sie können keine Codezeile speichern –

+0

Ionic 2 hat die Alerts überprüfen http: // ionicframework.com/docs/v2/components/#alert – mayur

Antwort

3

Sie können es tun, indem eine gemeinsame Observable wie folgt zu schaffen:

Ihre common.ts wird diese Methode haben: (Sprich, diese Komponente ist CommonProvider wie in CommonProvider Klasse geschrieben).

httpGetCall(url){ 
    return Observable.create(observer => { 
     this.http.get(url) 
     .map(res => res.json()) 
     .subscribe(data => { 
      console.log("Your data : " , data); 
      observer.next(data); 
     },(err) => { 
      console.log("Your error : ", err); 
      observer.error(err); 
      if(err.status == 400){ 
       this.presentToast('Validation error'); 
      }else if(err.status == 403){ 
       this.presentToast('Authorization error'): 
      }else if(err.status == 500){ 
       this.presentToast('Something wrong with server'); 
      }else ... 
     }); 
    }); 
} 

Von Ihrem Rufmethode, können Sie dies tun:

@Component({ 
    templateUrl: "<your-html-path/code>", 
    providers: [CommonProvider] 
}) 
export class YourPage{ 
    constructor(private common: CommonProvider){ 
     this.common.httpGetCall(<url>) 
     .subscribe(data => { 
      //..do something 
     },(err) => { 
      //.. Any other operation or nothing to do as toast action is already done. 
     }) 
    } 
} 

Obwohl, das ist nur, wenn Sie einen gemeinsamen Handler benötigen.

Verwandte Themen