typescript - para - Cómo lidiar con códigos de estado de HTTP que no sean 200 en Angular 2

http error 302 solucion

Question

En este momento, la forma en que hago las solicitudes http (tomadas de esta respuesta ) es esta:

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

Esto funciona bien, excepto por el hecho de que angular2 fallará si el código de estado devuelto es algo más que 200. Por ejemplo, si un usuario desea publicar algo y el servidor devuelve 400, angular 2 emitirá la excepción:

excepción no detectada: [object Object]

¿Cómo puedo evitar esto? Me gustaría manejar estos códigos de estado en mi aplicación para mejorar la experiencia del usuario (mostrar errores, etc.)

Answer 1

Sí, puedes manejarlo con el operador catch de esta manera y mostrar la alerta como quieras, pero primero tienes que importar Rxjs para lo mismo de esta manera

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

también se puede generar un error (con el bloque err) que es throw by catch block mientras la función .map ,

Me gusta esto -

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

Actualizar

como se requiere para cualquier estado sin verificarlo en particular, puedes probar esto: -

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