Angular：捕获连接超时且无互联网连接 HTTP 错误

Question

我正在尝试使用较新的 Angular 的 HTTP 客户端为 HTTP 请求添加错误处理： https: //angular.io/guide/http

在文档中，它说错误处理是按如下方式完成的：

return this.http.get('https://api.example.com/foo')
    .pipe(
      catchError(this.handleError)
    );

private handleError(error: HttpErrorResponse) {
  if (error.error instanceof ErrorEvent) {
    // A client-side or network error occurred. Handle it accordingly.
    console.log('Client side error:', error.error)
    // TODO: how do I catch specific client side errors?
  } else {
    console.log('Back-end error:', error.error)
  }
  // return an observable with a user-facing error message
  return throwError('Something bad happened; please try again later.');
};

处理后端错误非常简单。但是，我希望能够捕获特定的客户端错误，例如：

• 连接超时 （net::ERR_CONNECTION_TIMED_OUT）
• 没有网络连接

我怎样才能捕获这些特定的客户端错误？

更新 事实上我从来没有能够error.error返回一个ErrorEvent. 通常，当互联网连接断开或连接到无效域时，它会返回一个ProgressEvent.

Answer 1

事实上，我从来没有能够让 error.error 返回 ErrorEvent。通常，当互联网连接断开或连接到无效域时，它会返回 ProgressEvent。

你是对的，这似乎是Angular 文档中的一个错误- 这意味着你实际上应该寻找ProgressEvent.

根据 XMLHttpRequest规范， “连接超时”和“无互联网连接”都应返回 0 状态（任何“网络错误”也应返回 0 状态，即客户端中的某些连接问题）。

所以你的条件应该是：

private handleError(error: HttpErrorResponse) {
  if (error.status === 0 && error.error instanceof ProgressEvent) {
    // A client-side or network error occurred. Handle it accordingly.
    console.log('Client side error:', error.error)
  }
  ...
};