如何在HttpErrorResponse中获取响应体错误信息？

你在Angular里处理HTTP错误时，遇到HttpErrorResponse找不到body属性、拿不到服务器返回的错误JSON响应体的问题对吧？我来帮你梳理下问题根源和解决办法：

核心误区：HttpErrorResponse的错误内容存储位置 #

首先要明确：Angular的HttpErrorResponse中，服务器返回的错误响应体并不在body属性里，而是存放在error属性中。这是因为HttpErrorResponse是专门处理错误场景的对象，它的结构和成功响应的HttpResponse有区别。

解决方案：调整catchError逻辑获取错误体 #

你可以直接通过error.error来获取服务器返回的JSON错误体（前提是服务器确实返回了JSON格式的错误响应）。修改你的handleResponseMessage操作符即可：

export const handleResponseMessage = (
  messageService: MessageService,
  message = { 
    "success": 'Операция прошла успешно!', 
    "error": 'Операция прошла неуспешно!' 
  },
) => pipe(
  tap((response: any) => {
    messageService.showMessage('', response?.message || message.success, 'success');
  }),
  catchError((error: HttpErrorResponse) => {
    console.log(error);
    // 优先取服务器返回的错误信息，再降级到默认提示
    const errorMessage = error?.error?.message || error?.message || message.error;
    messageService.showMessage('', errorMessage, 'error');
    return throwError(() => error);
  }),
);

额外注意事项 #

• 确认服务器返回了错误响应体：如果服务器返回非2xx状态码时没有附带任何响应体，那error.error会是null或undefined，这种情况下只能使用默认错误提示。
• 处理非JSON格式的错误响应：如果你的请求没明确设置responseType: 'json'，Angular可能会把错误响应解析为字符串，这时候需要手动解析成JSON：

  let errorBody;
  try {
    errorBody = typeof error.error === 'string' ? JSON.parse(error.error) : error.error;
    const errorMessage = errorBody?.message || error?.message || message.error;
    messageService.showMessage('', errorMessage, 'error');
  } catch (e) {
    // 解析失败时用默认错误提示
    messageService.showMessage('', error?.message || message.error, 'error');
  }
  

• Angular版本兼容：不同版本的Angular中HttpErrorResponse的细节可能略有差异，但核心的error属性始终用于存储服务器返回的错误内容。

调整后你应该就能正确获取到服务器返回的错误JSON响应体了。

内容的提问来源于stack exchange，提问作者user14514318