Angular前端如何获取400错误响应详情并向用户展示

Angular 中通过 HttpClient 发起请求抛出的错误为 HttpErrorResponse 类型实例，后端返回的JSON响应体不会直接暴露在错误对象根层级，而是存储在实例的 error 属性下，直接传入整个错误对象无法读取到响应里的 details 字段。

你捕获到的错误对象实际结构如下：

HttpErrorResponse {
  headers: HttpHeaders,
  status: 400,
  statusText: "Bad Request",
  url: "你的接口请求地址",
  ok: false,
  // 后端返回的原始JSON响应就存在这个属性里
  error: {
    "schemas": ["urn:ietf:params:scim:api:messages:2.0:Error"],
    "details": ["Invalid query: prefixed wildcard must have at least 3 chars can not be used with field 'email'"],
    "status": 400
  },
  message: "Http failure response for 接口地址: 400 Bad Request"
}

1. 错误回调中正确提取详情字段 #

修改 submitIdForm 方法里的请求错误回调，从 error.error 路径下读取后端返回的内容，同时做空值兼容，覆盖跨域、请求超时、服务端500无响应体等异常场景：

error => {
  this.isTableLoading = false;
  // 安全读取details字段，无返回时兜底为空数组
  const backendErrDetails = error?.error?.details ?? [];
  this.triggerFeedback('error', 'SEARCH.STATUS.ERROR.SEARCH-BY-ID', backendErrDetails);
}

2. 适配弹窗组件的入参要求 #

如果你的 UxFeedbackService.nzModalFeedback 要求传入字符串格式的错误内容，可以在 triggerFeedback 的error分支里把details数组拼接为可读文本：

case 'error':
  this.translate.get(translPath).subscribe((translObj: object) => {
    let errContent = '请求失败，请稍后重试';
    if (Array.isArray(errObject) && errObject.length) {
      errContent = errObject.join('<br/>'); // 多条例外换行展示
    }
    this.UxFeedbackService.nzModalFeedback(type, translObj, errContent);
  });
  break;

修改后在错误回调中添加 console.log(error.error)，控制台输出的内容和DevTools网络面板中看到的响应JSON完全一致时，就说明读取路径正确。

如果你项目里配置了全局HTTP拦截器对错误返回做过二次封装，需要确认拦截器没有丢弃原始响应体，只要拦截器抛出的错误仍然保留error属性指向原始响应，上述写法就可以正常工作。

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