现在我处理http请求的方式(borrow this answer)是:

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

这可以正常工作,但如果返回的状态码不是200,angular2就会失败.例如,如果用户想要发布某个内容,而服务器返回400,angular 2将抛出异常:

未捕获异常:[对象]

我怎样才能避免这种情况?我想在我的应用程序中处理这些状态代码,以增强用户体验(显示错误等)

推荐答案

是的,你可以像这样处理catch操作符,并根据需要显示alert ,但首先你必须像这样导入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));
                }
            });
    }

此外,您还可以在执行.map函数时通过catch block抛出handel error(带err block),

像这样-

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

Update

如果需要任何状态而不选中SpecialUA one,您可以try 以下操作:-

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

Typescript相关问答推荐

从传递的数组中出现的值设置返回键的类型

推断类型

即使子网是公共的,AWS CDK EventBridge ECS任务也无法分配公共IP地址

typescript抱怨值可以是未定义的,尽管类型没有定义

打印脚本丢失函数的泛型上下文

如何在TypeScript中将一个元组映射(转换)到另一个元组?

在Typescript 中,有没有`index=unfined的速记?未定义:某个数组[索引]`?

如何将v-for中的迭代器编写为v-if中的字符串?

如何使这种一对一关系在旧表上起作用?

Typescript -返回接口中函数的类型

为什么在这种情况下,打字脚本泛型无法正确自动完成?

如何通过转换器类继承使用多态将对象从一种类型转换为另一种类型

三重融合视角与正交阵

如何填写Partial的一些属性并让类型系统知道它?

仅当定义了值时才按值筛选数组

如何在TypeScript中将元组与泛型一起使用?

通过辅助函数获取嵌套属性时保留类型

如何使用 Angular 确定给定值是否与应用程序中特定单选按钮的值匹配?

如何将 MUI 主题对象的自定义属性与情感样式组件中的自定义props 一起使用?

如何在由函数参数推断的记录类型中具有多个对象字段类型