Angular9 處理請(qǐng)求錯(cuò)誤

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

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

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

獲取錯(cuò)誤詳情

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

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

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

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

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

下面的例子在之前定義的 ConfigService 中定義了一個(gè)錯(cuò)誤處理程序。

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.');
};

該處理程序會(huì)返回一個(gè)帶有用戶友好的錯(cuò)誤信息的 RxJS ErrorObservable。下列代碼修改了 getConfig() 方法，它使用一個(gè)管道把 HttpClient.get() 調(diào)用返回的所有 Observable 發(fā)送給錯(cuò)誤處理器。

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

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

重試失敗的請(qǐng)求

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

RxJS 庫提供了幾個(gè)重試操作符。例如，retry() 操作符會(huì)自動(dòng)重新訂閱一個(gè)失敗的 Observable 幾次。重新訂閱 HttpClient 方法會(huì)導(dǎo)致它重新發(fā)出 HTTP 請(qǐng)求。

下面的例子演示了如何在把一個(gè)失敗的請(qǐng)求傳給錯(cuò)誤處理程序之前，先通過管道傳給 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
    );
}