web-dev-qa-db-fra.com

Comment traiter les codes de statut http autres que 200 dans Angular 2

En ce moment, la façon dont je fais les requêtes http (emprunté à cette réponse ) est la suivante:

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

Cela fonctionne très bien, sauf que angular2 échouera si le code d'état renvoyé est différent de 200. Par exemple, si un utilisateur souhaite publier quelque chose et que le serveur renvoie 400, angular 2 lancera le exception:

exception non capturée: [objet Objet]

Comment puis-je éviter ça? J'aimerais gérer ces codes d'état dans mon application afin d'améliorer l'expérience utilisateur (erreurs d'affichage, etc.)

typescriptangular
37
Sebastian Olsen

Oui, vous pouvez vous en servir avec l'opérateur de capture comme celui-ci et afficher l'alerte à votre guise, mais vous devez d'abord importer Rxjs de la même manière

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

vous pouvez aussi gérer l'erreur (avec le bloc err) qui est lancée par le bloc catch pendant que .map fonctionne,

comme ça -

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

Mise à jour

comme requis pour tout statut sans vérification particulière, vous pouvez essayer ceci: -

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)} );
59
Pardeep Jain

Inclut les importations requises et vous pouvez prendre votre décision dans la méthode handleError Le statut de l'erreur donnera le code d'erreur

import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import {Observable, throwError} from "rxjs/index";
import { catchError, retry } from 'rxjs/operators';
import {ApiResponse} from "../model/api.response";
import { TaxType } from '../model/taxtype.model'; 

private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
  // A client-side or network error occurred. Handle it accordingly.
  console.error('An error occurred:', error.error.message);
} else {
  // The backend returned an unsuccessful response code.
  // The response body may contain clues as to what went wrong,
  console.error(
    `Backend returned code ${error.status}, ` +
    `body was: ${error.error}`);
}
// return an observable with a user-facing error message
return throwError(
  'Something bad happened; please try again later.');
  };

  getTaxTypes() : Observable<ApiResponse> {
return this.http.get<ApiResponse>(this.baseUrl).pipe(
  catchError(this.handleError)
);
  }
0
Vinayak Shedgeri