Angular9 處理請求錯誤

如果請求在服務(wù)器上失敗了，那么 HttpClient 就會返回一個錯誤對象而不是一個成功的響應(yīng)對象。

執(zhí)行服務(wù)器請求的同一個服務(wù)中也應(yīng)該執(zhí)行錯誤檢查、解釋和解析。

發(fā)生錯誤時，你可以獲取失敗的詳細信息，以便通知你的用戶。在某些情況下，你也可以自動重試該請求。

獲取錯誤詳情

當(dāng)數(shù)據(jù)訪問失敗時，應(yīng)用會給用戶提供有用的反饋。原始的錯誤對象作為反饋并不是特別有用。除了檢測到錯誤已經(jīng)發(fā)生之外，還需要獲取錯誤詳細信息并使用這些細節(jié)來撰寫用戶友好的響應(yīng)。

可能會出現(xiàn)兩種類型的錯誤。

服務(wù)器端可能會拒絕該請求，并返回狀態(tài)碼為 404 或 500 的 HTTP 響應(yīng)。這些是錯誤響應(yīng)。

客戶端也可能出現(xiàn)問題，例如網(wǎng)絡(luò)錯誤會讓請求無法成功完成，或者 RxJS 操作符也會拋出異常。這些錯誤會產(chǎn)生 JavaScript 的 ErrorEvent 對象。

HttpClient 在其 HttpErrorResponse 中會捕獲兩種錯誤。你可以檢查一下這個響應(yīng)是否存在錯誤。

下面的例子在之前定義的 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() 調(diào)用返回的所有 Observable 發(fā)送給錯誤處理器。

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

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

重試失敗的請求

有時候，錯誤只是臨時性的，只要重試就可能會自動消失。 比如，在移動端場景中可能會遇到網(wǎng)絡(luò)中斷的情況，只要重試一下就能拿到正確的結(jié)果。

RxJS 庫提供了幾個重試操作符。例如，retry() 操作符會自動重新訂閱一個失敗的 Observable 幾次。重新訂閱 HttpClient 方法會導(dǎo)致它重新發(fā)出 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
    );
}