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

Question

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

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 bien, sauf pour le fait que angular2 échouera si le code d'état renvoyé est rien d'autre que de 200. Par exemple, si un utilisateur veut publier quelque chose et que le serveur retourne 400, angulaire 2 va lancer l'exception:

uncaught exception: [object object]

Comment puis-je éviter cela? J'aimerais gérer ces codes de statut dans mon application, afin d'améliorer l'expérience utilisateur (afficher les erreurs, etc)

Answer 1

Oui, vous pouvez gérer avec l'opérateur de capture comme celui-ci et afficher l'alerte comme vous le souhaitez, mais vous devez tout 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 également gérer les erreurs (avec le bloc err) qui sont renvoyées par le bloc catch alors 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)} );