如何在Angular中通过HttpClient捕获状态码？

嘿，我来帮你梳理下怎么在这个场景里捕获HTTP状态码～其实你现有的代码已经具备获取状态码的基础了，咱们分两种情况来看：

一、在错误处理中捕获状态码 #

你的handleError方法接收的HttpErrorResponse对象本身就包含了状态码属性status，直接读取就行。比如可以优化你的错误处理逻辑，把状态码明确打印出来：

private handleError(err: HttpErrorResponse) {
  let errorMessage: string;
  // 发生客户端或网络错误（比如断网、跨域问题）
  if (err.error instanceof Error) {
    errorMessage = `发生客户端错误: ${err.error.message}`;
    // 这类错误的状态码通常是0
    console.error(`错误状态码: ${err.status}, 详情: ${errorMessage}`);
  } else {
    // 服务端返回的错误，直接获取状态码（比如404、500等）
    errorMessage = `服务端错误 状态码: ${err.status}, 响应体: ${err.error}`;
    console.error(errorMessage);
  }
  console.error(errorMessage || err);
  // 补全你之前未完成的错误Observable返回逻辑
  return throwError(() => new Error(errorMessage));
}

二、在成功响应中捕获状态码 #

你的extractData方法接收的是HttpResponse<Truck>对象，这个对象里的status属性就是成功响应的状态码（比如200、201）。另外要提醒你一下，原来的代码里const body = response;是不对的，应该取response.body才是接口返回的数据体，修改后的代码如下：

private extractData(response: HttpResponse<Truck>) {
  // 直接获取成功响应的状态码
  const successStatusCode = response.status;
  console.log(`请求成功，状态码: ${successStatusCode}`);
  
  // 正确获取响应体数据
  const body = response.body;
  return body || {};
}

关键注意点：获取完整的HttpResponse #

要让extractData能接收到包含状态码的HttpResponse对象，你在调用HttpClient的方法（比如get/post）时，必须设置observe: 'response'选项，否则默认只会返回响应体，拿不到状态码等元数据。举个例子：

// 假设这是你服务里的请求方法
getTruckData(): Observable<Truck> {
  return this.http.get<Truck>('/api/trucks', { observe: 'response' })
    .pipe(
      map(this.extractData),
      catchError(this.handleError)
    );
}

这样不管是成功还是错误场景，你都能轻松捕获到对应的HTTP状态码啦～

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