http.get - 如何正确捕获404

时间:2017-06-30 07:51:51

标签: angular http error-handling http-status-code-404

我正在构建一个日历应用程序,用于从(当前模拟的)后端获取每天的数据。 在http.get的正确URL上,这很好用,但是如果url是错误的,或者在后端没有请求日的数据/ json对象(例如,周末没有任何数据),我(显然)获得404,虽然控制台中的日志很少显示它,但它总是给我以下错误:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

显然它没有预期的字符,因为请求的那天没有Json对象存在。检查网络分析显示它确实是404错误。

我使用了来自https://angular.io/guide/http#subscribe

的基本http.get和handleError

http.get的服务代码:

getDayInfo(date: string): Observable<any> {
  return this.gttp.get('somepath/' + date + '/somemoreinfo')
    .map(this.extractData, // works just fine
         console.log('map running for date: ', date)
    ) 
    .catch(this.handleError);
}

private extractData(res: Response) {
  if (res != null) {
    let body = res.json();;
    return body;
  } else { // else return an empty dummy json, doesn't really work here
    return '[{"id": "", "userId": "", "userName": "", "type": { "name": "" }, "date": {' +
    '"startDate": "", "endDate": "", "startTime": "", "endTime": "" }   }]'; }
}

private handleError(error: Response | any) {
  console.log('Errorhandling triggered'); 
  let errMsg: string;
  if (error instanceof Response) {
    console.log('Errorhandling if-block'); // this triggers on a 404
    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('Error ', errMsg); // this never appears in the log though
  return Observable.throw(errMsg);
}

我的目标是捕获404,而不是让它抛出我之前发布的JSON.parse错误并通过发送空的json对象(或虚拟json对象)来处理它,因此日历中的日期只显示没有。

1 个答案:

答案 0 :(得分:4)

你的问题在线

const body = error.json() || '';

问题是当你的后端发送错误(这里是404)时,你不会发送一个JSON对象。因此,如果您使用error.json(),请不要期望获得JSON对象!

您从后端返回JSON错误,或者您没有在错误处理程序中使用json()函数。

当您不使用json()功能时,您还可以访问包含错误代码的status属性(如果我没记错的话)。所以你可以为它设置条件,就像它的404,你做你想要的。

我跳了一下我明确了myslef,如果没有,请随时询问更多细节!