Come gestire i codici di stato http diversi da 200 in Angular 2

In questo momento il modo in cui faccio le richieste HTTP (preso in prestito da questa risposta ) è questo:

POST(url, data) { var headers = new Headers(), authtoken = localStorage.getItem('authtoken'); headers.append("Content-Type", 'application/json'); if (authtoken) { headers.append("Authorization", 'Token ' + authtoken) } headers.append("Accept", 'application/json'); var requestoptions = new RequestOptions({ method: RequestMethod.Post, url: this.apiURL + url, headers: headers, body: JSON.stringify(data) }) return this.http.request(new Request(requestoptions)) .map((res: Response) => { if (res) { return { status: res.status, json: res.json() } } }); } 

Funziona bene, tranne per il fatto che angular2 fallirà se il codice di stato restituito è nient’altro che 200. Ad esempio, se un utente vuole pubblicare qualcosa e il server restituisce 400, angular 2 genererà l’eccezione:

eccezione non rilevata: [object object]

Come posso evitare questo? Mi piacerebbe gestire questi codici di stato nella mia app per migliorare l’esperienza dell’utente (mostrare errori, ecc.)

Sì, puoi gestirlo con l’operatore catch in questo modo e mostrare l’avviso come vuoi, ma prima devi importare Rxjs per lo stesso come in questo modo

 import {Observable} from 'rxjs/Rx'; return this.http.request(new Request(this.requestoptions)) .map((res: Response) => { if (res) { if (res.status === 201) { return [{ status: res.status, json: res }] } else if (res.status === 200) { return [{ status: res.status, json: res }] } } }).catch((error: any) => { if (error.status === 500) { return Observable.throw(new Error(error.status)); } else if (error.status === 400) { return Observable.throw(new Error(error.status)); } else if (error.status === 409) { return Observable.throw(new Error(error.status)); } else if (error.status === 406) { return Observable.throw(new Error(error.status)); } }); } 

inoltre puoi correggere l’errore (con err blocco) che viene lanciato da catch catch mentre la funzione .map ,

come questo –

 ... .subscribe(res=>{....} err => {//handel here}); 

Aggiornare

come richiesto per qualsiasi stato senza verificarne uno particolare puoi provare questo: –

 return this.http.request(new Request(this.requestoptions)) .map((res: Response) => { if (res) { if (res.status === 201) { return [{ status: res.status, json: res }] } else if (res.status === 200) { return [{ status: res.status, json: res }] } } }).catch((error: any) => { if (error.status < 400 || error.status ===500) { return Observable.throw(new Error(error.status)); } }) .subscribe(res => {...}, err => {console.log(err)} );