Как обращаться с кодами статуса http, отличными от 200, в Angular 2

Прямо сейчас, как я делаю http-запросы (заимствованные из этого ответа):

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

Это прекрасно работает, за исключением того факта, что angular2 завершится с ошибкой, если возвращенный код состояния будет чем-то иным, чем 200. Например, если пользователь хочет что-то отправить и сервер вернет 400, angular 2 будет бросать исключение:

исключение uncaught: [object Object]

Как я могу избежать этого? Я бы хотел обработать эти коды состояния в своем приложении, чтобы улучшить пользовательский интерфейс (показать ошибки и т.д.).

ОТВЕТЫ

Ответ 1

Да, вы можете обращаться с оператором catch таким образом и показывать предупреждение, как хотите, но во-первых, вам нужно импортировать Rxjs для того же типа

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

также вы можете передать ошибку (с блоком err), которая выбрана блоком catch в то время как функция .map,

как это -

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

Update

как требуется для любого состояния без проверки участника, вы можете попробовать следующее: -

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