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

Question

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

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抛出错误。在我的用例中，我只想获取请求状态和正文，而不管状态是什么，我想根据组件中的状态决定要采取的操作，而不是服务中的错误处理程序。我一直试图找出一些棘手的方法来在服务中创建一个错误处理程序，该处理程序只返回（可观察的）HTTP响应，但一直无法做到——甚至不确定这是否是正确的方法。

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

Answer 1

这对我来说是有效的，因为HttpClient 无法检索纯文本。

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

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

该body物业可提供HttpErrorResponse.error。

HttpResponseBase可用属性HttpErrorResponse

• headers : HttpHeaders - 所有响应标头。
• status : number - 响应状态代码。
• 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)
}))

请参阅 AngularHttpClient文档：错误处理