Angular 7：单次请求中同时返回HTTP响应与结果可行吗？

当然可行！你已经在代码里用到了关键配置observe: 'response'，这正是让Angular HttpClient返回完整响应对象的核心——通过它，你不需要重复请求就能同时拿到HTTP状态码和响应体数据。

问题分析 #

你当前的代码里已经设置了{ observe: 'response' }，但订阅时没有正确处理返回的HttpResponse对象，导致只拿到了响应体（或错误对象），没能同时获取状态码。我们只需要调整订阅逻辑，就能一次性获取所有需要的信息。

修改后的代码实现 #

getObject(data: any): Observable<{ status: number, data?: any, error?: any }> { 
  let httpOptions = this.kecloakService.buildHeaderWithToken(); 
  let httpParams = new HttpParams().set("data", data); 
  httpOptions = _.extend(httpOptions, httpParams); 
  // 这个配置是关键：让HttpClient返回完整的HttpResponse对象
  httpOptions = _.extend(httpOptions, { observe: 'response' }); 
  let resultSubject = new AsyncSubject<{ status: number, data?: any, error?: any }>(); 

  this.configurationService.loadNetworkConfiguration(false).subscribe((config: NetworkConfiguration) => { 
    if (config) { 
      const resultObservable = this.http.get(config.backendHostUrl + "ObjectData/", httpOptions); 
      
      resultObservable.subscribe(
        // 成功响应时，拿到完整的HttpResponse对象
        (response: HttpResponse<any>) => { 
          // 包装状态码和响应体数据
          resultSubject.next({
            status: response.status,
            data: response.body
          }); 
          resultSubject.complete(); 
        }, 
        // 错误响应时，拿到HttpErrorResponse对象
        (error: HttpErrorResponse) => { 
          // 包装错误状态码和错误信息
          resultSubject.next({
            status: error.status,
            error: error.error
          }); 
          resultSubject.complete(); 
        }
      ); 
    } 
  }); 
  return resultSubject; 
}

关键修改点说明 #

• 明确返回类型：把Observable的泛型改成包含status、data、error的对象，让调用方更清楚返回的数据结构。
• 正确处理响应对象：成功回调的参数类型设为HttpResponse<any>，这样可以直接访问response.status（响应码）和response.body（实际返回结果）。
• 错误处理优化：错误回调的参数类型设为HttpErrorResponse，它包含了错误状态码（比如400、404、500等）和错误详情error.error。
• 统一数据格式：无论成功还是失败，都返回包含status的对象，让调用方可以统一处理结果。

使用示例 #

调用这个方法的时候，就能同时拿到状态码和数据了：

this.yourService.getObject(yourData).subscribe(result => {
  console.log("响应码:", result.status);
  if (result.data) {
    console.log("返回结果:", result.data);
    // 处理成功逻辑
  } else if (result.error) {
    console.log("错误信息:", result.error);
    // 处理错误逻辑
  }
});

这样你就不需要重复发送请求，单次请求就能获取到所有需要的信息，完全满足你的需求。

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