Angular 13中err返回字符串而非HttpResponse对象问题求助

一、捕获到的err为字符串而非HttpResponse对象的原因及解决 #

1. 未配置获取完整响应对象 #

Angular HttpClient的delete方法默认仅返回响应体数据，不会返回包含状态码、headers等信息的完整HttpResponse对象。若要在错误中获取完整响应对象，需在请求配置里添加observe: 'response'：

return this.http.delete(
  "http://Localhost:8080/delete",
  { 
    headers: { 'Content-Type': 'application/json' },
    observe: 'response' // 配置后可获取完整响应对象
  }
).pipe(
  catchError((err: HttpErrorResponse, caught) => {
    // 此时err为HttpErrorResponse对象，可通过err.error获取响应体（可能是JSON或字符串）
    console.log(err.status, err.error);
    return of(false); 
  }),
  map((response) => {
    // 成功时response是HttpResponse对象
    return true;
  })
)

2. 服务器返回的JSON格式不合法 #

即便服务器声明Content-Type: application/json，如果返回的响应体存在JSON语法错误（比如引号缺失、逗号误用等），HttpClient无法解析为JSON对象，就会把原始响应文本作为字符串存入err.error。可以直接打印err.error确认格式，或用Postman等工具请求接口，检查错误响应的实际格式是否合规。

二、当前代码逻辑问题 #

你的代码中，catchError返回of(false)后，后续的map会把这个值转为true，导致无论请求成功还是失败，最终都会返回true，这不符合预期。调整逻辑如下：

return this.http.delete(
  "http://Localhost:8080/delete",
  { 
    headers: { 'Content-Type': 'application/json' },
    observe: 'response'
  }
).pipe(
  map((response) => {
    // 请求成功返回true
    return true;
  }),
  catchError((err: HttpErrorResponse) => {
    // 请求失败返回false，或按需处理错误
    console.error('删除失败:', err);
    return of(false); 
  })
)

注：将map放在catchError之前，确保只有成功的请求流会进入map，失败流直接被catchError处理返回false。

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