Angular HttpClient：即使出现错误，如何获取原始 HTTP 响应

Question

在使用 HttpClient 的 Angular 服务中，我创建了一个从 POST 返回原始 HTTP 响应的方法：

httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
    //observe: 'response'
  }),
  observe: 'response' as 'body'
};

forgotLogin(requestData: PUMRequestData): Observable<HttpResponse<string>> {
  return this.http.post<HttpResponse<string>>("http://...", requestData, this.httpOptions);

然后在我的组件中，我只查看原始 http 响应中的状态和正文。

this.api.forgotLogin(pumRequestData).subscribe(response => {
  this.hStatus = response.status;
  this.hBody = response.body;
});

问题是如果响应状态不在200系列中，那么HttpClient会抛出错误。在我的用例中，我只想获取请求状态和正文，而不管状态是什么，并且我想根据我的组件中的状态而不是在服务中的错误处理程序中决定要采取什么行动。我一直试图想出一些棘手的方法来在服务中创建一个错误处理程序，该处理程序只返回（Observable）HTTP 响应，但无法 - 甚至不确定这是否是正确的方法。

那么当状态不是 200 系列时，我如何才能将原始 http 响应返回给我的组件？

Answer 1

根据HttpClient not able to retrieve plain text，这对我有用。

That's right.
It works when there is no generic code applied to it.
it will work for:

http.get(url, {responseType: 'text'}

Answer 2

好吧，我放弃并按照建议使用错误处理程序解决了问题（感谢 Christopher）。我想要的是一个 http 客户端，无论状态如何，它都会将 http 响应传回给我，并且只有在没有返回响应时才会抛出错误（例如，不存在的域）。 Angular HttpClient 不会那样做。可能还有另一个 http 客户端库可以，但是生命太短了。

我只需要响应中的 HTTP 状态和正文，所以我创建了这个错误处理程序：

  private handleError(error: HttpErrorResponse) {
    if (error.status == 0)
      return of({ status: 600, body: "Unexpected error. If this problem persists, please contact ..." })
    else
      return of({ status: error.status, body: error.error });
  }

那么我的 API 调用方法如下：

  changePassword(requestData: PUMRequestData): Observable<HttpResponse<string>> {
    return this.http.put<any>("http:// ... /API/ChangePassword", requestData, this.httpOptions)
      .pipe(catchError(err => this.handleError(err)));
  }

现在，无论订阅者是从成功的 HTTP 状态 200 调用还是从错误处理程序获得响应，它都将包含“状态”和“正文”。请注意，如果没有 HTTP 响应，那么我设置了一个虚构的 HTTP 状态 600，在这种情况下，我必须提供正文中缺少的错误消息。我还必须将 put 的数据类型从 HttpResponse 字符串更改为 any。

Answer 3

当您订阅HTTP 响应时，您可以添加错误处理程序。 HttpErrorResponse 对象包括继承自HttpResponseBase 的HttpHeaders、status 和statusText。

body 在HttpErrorResponse.error 属性中可用。

HttpResponseBaseHttpErrorResponse 上可用的属性

• 标头：HttpHeaders - 所有响应标头。
• 状态：数字 - 响应状态代码。
• statusText：字符串 - 响应状态代码的文本描述。 （不要依赖这个）
• 网址：字符串| null - 检索到的资源的 URL，如果不可用，则为 null。
• ok：boolean - 状态码是否在 2xx 范围内。

示例

this.api.forgotLogin(pumRequestData).subscribe(
  response => {
    this.hStatus = response.status;
    this.hBody = response.body;
  },
  (error: HttpErrorResponse) => {
    if (error.error instanceof ErrorEvent) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(`Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
  }
);

错误处理程序也可以放在 RXJS pipe 中，以便在订阅 HTTP 请求之前嵌入它。

this.http.get<Object>(full_url, options).pipe(catchError((error: HttpErrorResponse) => {
  // Process error here, such as logging.
  ...
  return throwError(error)
}))

参见 Angular HttpClient 文档：Error handling