如何在Swal错误提示中获取HTTP错误响应JSON的title字段？

问题原因 #

当前代码直接将error对象拼接进提示文本，但Angular的HttpClient返回的错误是HttpErrorResponse对象，后端返回的JSON响应体实际存储在该对象的error属性中，因此无法直接访问到title字段。

修改后的代码 #

调整错误回调逻辑，解析后端返回的错误响应体，提取title字段用于弹窗提示：

addChangeWaveRequest(form: FormData) {
  const url = `${this.serverURL}/api/waveControl/add`;
  return this.http.post<FormData>(url, form, {
    reportProgress: true,
    observe: 'response',
  }).subscribe(responseData => {
    this.newUserStatus = responseData.ok;
    if (this.newUserStatus) {
      this.logService.info("User added Wave Update Successfully");
      Swal.fire({
        icon: 'success',
        text: 'User added Wave Update Successfully'
      });
      this.router.navigate(['/mediaList']);
    }
  }, (error: any) => {
    console.log("error log:", error);
    // 解析后端返回的错误响应体，提取title字段
    const errorMessage = error.error?.title || '更新Wave时发生未知错误';
    Swal.fire({
      icon: 'error',
      text: errorMessage
    });
  });
}

关键说明 #

• error.error：HttpErrorResponse对象的error属性对应后端返回的JSON响应体，从中可直接获取title字段。
• 用可选链操作符?.避免后端未返回title字段时出现报错，同时提供默认提示文本作为兜底。

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