Angular9 处理请求错误

如果请求在服务器上失败了，那么 HttpClient 就会返回一个错误对象而不是一个成功的响应对象。

执行服务器请求的同一个服务中也应该执行错误检查、解释和解析。

发生错误时，你可以获取失败的详细信息，以便通知你的用户。在某些情况下，你也可以自动重试该请求。

获取错误详情

当数据访问失败时，应用会给用户提供有用的反馈。原始的错误对象作为反馈并不是特别有用。除了检测到错误已经发生之外，还需要获取错误详细信息并使用这些细节来撰写用户友好的响应。

可能会出现两种类型的错误。

服务器端可能会拒绝该请求，并返回状态码为 404 或 500 的 HTTP 响应。这些是错误响应。

客户端也可能出现问题，例如网络错误会让请求无法成功完成，或者 RxJS 操作符也会抛出异常。这些错误会产生 JavaScript 的 ErrorEvent 对象。

HttpClient 在其 HttpErrorResponse 中会捕获两种错误。你可以检查一下这个响应是否存在错误。

下面的例子在之前定义的 ConfigService 中定义了一个错误处理程序。

Path："app/config/config.service.ts (handleError)" 。

private handleError(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}`);
  }
  // return an observable with a user-facing error message
  return throwError(
    'Something bad happened; please try again later.');
};

该处理程序会返回一个带有用户友好的错误信息的 RxJS ErrorObservable。下列代码修改了 getConfig() 方法，它使用一个管道把 HttpClient.get() 调用返回的所有 Observable 发送给错误处理器。

Path："app/config/config.service.ts (getConfig v.3 with error handler)" 。

getConfig() {
  return this.http.get<Config>(this.configUrl)
    .pipe(
      catchError(this.handleError)
    );
}

重试失败的请求

有时候，错误只是临时性的，只要重试就可能会自动消失。 比如，在移动端场景中可能会遇到网络中断的情况，只要重试一下就能拿到正确的结果。

RxJS 库提供了几个重试操作符。例如，retry() 操作符会自动重新订阅一个失败的 Observable 几次。重新订阅 HttpClient 方法会导致它重新发出 HTTP 请求。

下面的例子演示了如何在把一个失败的请求传给错误处理程序之前，先通过管道传给 retry() 操作符。

Path："app/config/config.service.ts (getConfig with retry)" 。

getConfig() {
  return this.http.get<Config>(this.configUrl)
    .pipe(
      retry(3), // retry a failed request up to 3 times
      catchError(this.handleError) // then handle the error
    );
}