Angular中API调用返回406错误时如何获取响应体中的自定义错误信息

阿华AIGC实验室

2026-4-7

我帮你分析下这个问题，你现在遇到的情况其实是Angular的HttpClient在处理非2xx状态码（比如你的406）时，会把错误包装成HttpErrorResponse对象，而你之前的代码没有正确从这个对象里提取服务器返回的响应体内容，才会只拿到默认的"Http failure response..."这类通用提示。

问题根源

你当前在catchError里直接处理的错误，本质上是Angular封装的HttpErrorResponse实例，它的默认toString()会生成你看到的那种通用错误消息，但服务器返回的自定义错误体（也就是{"message":"Invalid contract"}）其实藏在这个对象的error属性里。你之前没正确访问这个属性，所以拿不到想要的"Invalid contract"。

修改你的错误处理代码

我把你的sendRequest方法调整一下，重点优化catchError部分的逻辑，确保能正确提取服务器返回的自定义错误信息：

sendRequest(request: BookingRequest): Observable<any>{ 
  const authorityCode = this.tableService.enteId; 
  const baseUrl = this.getCarBookingBaseUrl(authorityCode); 
  const url = `${baseUrl}/api/Booking`; 
  const body = JSON.stringify(request); 

  return this.http.post<any>(url, body, { headers: this.buildBasicAuthHeaders() }).pipe( 
    map(_ => _.bookingId || 'Number not found'), 
    catchError((error: HttpErrorResponse) => { 
      let errorMessage = 'Unknown error';

      // 区分客户端/网络错误和服务器返回的业务错误
      if (error.error instanceof ErrorEvent) {
        // 客户端侧的错误（比如网络断开、请求发送失败）
        errorMessage = `客户端错误: ${error.error.message}`;
      } else {
        // 服务器返回的错误，优先取响应体里的自定义message
        if (error.error?.message) {
          errorMessage = error.error.message;
        } else {
          // 没有自定义message时，用状态码和默认提示兜底
          errorMessage = `服务器错误 ${error.status}: ${error.statusText}`;
        }
      }

      return throwError(() => new Error(errorMessage)); 
    }) 
  );
}

订阅时的使用示例

当你在组件里订阅这个方法时，就可以在错误回调里拿到你需要的"Invalid contract"这类提示，直接显示在页面上：

this.yourService.sendRequest(yourBookingRequest).subscribe({
  next: (bookingId) => {
    // 处理成功逻辑，比如拿到bookingId后的后续操作
  },
  error: (err) => {
    // 这里的err.message就是服务器返回的自定义错误信息
    console.log(err.message); // 406时会输出"Invalid contract"
    // 比如赋值给组件属性，在模板里用{{ errorMessage }}显示
    this.errorMessage = err.message;
  }
});