Angular中HttpClient获取状态码失效问题求助

嘿，作为Angular新手遇到这种问题很正常，我帮你一步步梳理下问题所在：

1. 返回类型不匹配的核心问题 #

你声明createTruck返回Observable<number>，但当你添加{observe: 'response'}选项时，http.post实际返回的是Observable<HttpResponse<any>>——这是包含整个响应的对象（状态码、响应头、响应体都在里面），不是直接的响应体数值。类型不匹配会导致后续代码无法正确访问状态码。

2. extractData函数未适配完整响应对象 #

你的extractData应该是为处理单纯响应体写的，但现在拿到的是完整的HttpResponse实例，得调整它来获取状态码。比如如果你的目标是返回状态码，那函数里要从response.status取值，而不是去读取响应体。

3. updateTrucks里的语法错误 #

你代码里的JSON.stringi...明显是JSON.stringify的笔误，这个小错误会直接导致该方法运行失败。

修改后的示例代码 #

我帮你调整了类型、修正了函数和语法问题，你可以参考：

// 调整extractData来获取状态码
private extractData(response: HttpResponse<any>): number {
  // 直接从响应对象中取出状态码
  return response.status;
}

private handleError(error: any): Observable<never> {
  console.error('请求出错:', error);
  return throwError(() => new Error('请求失败，请稍后重试'));
}

createTruck(truck: Truck): Observable<number> {
  return this.http.post(this.baseUrl, truck, {observe: 'response'})
    .pipe(
      map(this.extractData),
      tap(status => console.log(`响应状态码: ${status}`)),
      catchError(this.handleError)
    );
}

updateTrucks(truck: Truck): Observable<Truck> {
  // 修正JSON.stringify笔误，同时HttpClient会自动序列化请求体，无需手动调用
  return this.http.put<Truck>(`${this.baseUrl}/${truck.id}`, truck)
    .pipe(
      catchError(this.handleError)
    );
}

额外提示 #

如果需要同时获取状态码和响应体数据，可以把返回类型改成Observable<{status: number, data: Truck}>，这样能拿到完整的响应信息：

createTruck(truck: Truck): Observable<{status: number, data: Truck}> {
  return this.http.post<HttpResponse<Truck>>(this.baseUrl, truck, {observe: 'response'})
    .pipe(
      map(response => ({
        status: response.status,
        data: response.body!
      })),
      tap(result => console.log(`状态码: ${result.status}, 返回数据: ${JSON.stringify(result.data)}`)),
      catchError(this.handleError)
    );
}

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