http.get中的.catch（）不会捕获HTTP 500错误代码

Question

在我的Angular 2应用程序中，我有一个服务使用返回Observable的http.get方法。

campaign.service.ts

public getCampaign(campaignId: string): Observable<Campaign> { 
    return this.http.get(this.campaignsUrl + '/' + campaignId, options) 
    .map(this.extractData) 
    .catch(this.handleError); 
} 

private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || body || {}; 
} 

private handleError(error: Response | any) { 
    // In a real world app, we might use a remote logging infrastructure 
    let errMsg: string; 
    if (error instanceof Response) { 
    const body = error.json() || ''; 
    const err = body.error || JSON.stringify(body); 
    errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
    errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
} 

然后我把它在我的组件，像这样：

campaign.component.ts

this.campaignService.getCampaign(paramId) 
    .subscribe(
    obj => { 
     // do something 
    }, 
    () => { 
     // handle error here 
    } 
    }); 

但是，如果http.get调用返回一个HTTP 500，我从来没有打过我的.catch(...)节y服务班。控制台输出未捕获的异常。

GET http://localhost:9001/api/v1/campaigns/4175edc4 500 (Internal Server Error) 
EXCEPTION: Response with status: 500 Internal Server Error for URL: http://localhost:9001/api/v1/campaigns/4175edc4 
Uncaught Response {_body: "{"message":"invalid input syntax for uuid: \"4175edc4\""}", status: 500, ok: false, statusText: "Internal Server Error", headers: Headers…} 

我在这里做错了什么？

Answer 1

Angular 2遵循Fetch规范，其中only throws errors when there was a problem with the request operation。如果返回错误响应，则不会抛出错误（因为错误响应仍然是有效的响应）。

您需要检查response.ok属性，以确保它不是404或500等

Answer 2

感谢您的评论@乔恩。我很难完成这项工作。这是我的代码（直接从Angular2资料为准）：

testGet(): Observable<any> { 
    return this.http.get(this.someUrl + '/toError405') 
        .map(this.extractData) 
        .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || { }; 
    } 

    private handleError (error: Response | any) { 
    // In a real world app, we might use a remote logging infrastructure 
    let errMsg: string; 
    if (error instanceof Response) { 
     const body = error.json() || ''; 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
    } 

正如你所看到的，我强迫一个405错误，这是我在控制台的网络选项卡看得很清楚。但是，extractData()或handleError()都不会被击中。处理这个问题的最好方法是什么？谢谢。