HTTP-клиент — Обработка ошибок запроса¶

27.02.2023

Если запрос не удался на сервере, HttpClient возвращает объект error вместо успешного ответа.

Тот же сервис, который выполняет ваши серверные транзакции, должен также выполнять проверку, интерпретацию и разрешение ошибок.

При возникновении ошибки вы можете получить подробную информацию о том, что не удалось сделать, чтобы сообщить об этом пользователю. В некоторых случаях вы также можете автоматически повторить запрос.

Получение информации об ошибке¶

Приложение должно предоставлять пользователю полезную обратную связь при неудачном доступе к данным. Необработанный объект ошибки не особенно полезен в качестве обратной связи.

В дополнение к обнаружению того, что произошла ошибка, вам необходимо получить подробности ошибки и использовать их для составления удобного для пользователя ответа.

Возможны два типа ошибок.

• Бэкэнд сервера может отклонить запрос, вернув ответ HTTP с кодом состояния, например, 404 или 500.

  Это ответы об ошибках.

• Что-то может пойти не так на стороне клиента, например, сетевая ошибка, которая не позволяет успешно завершить запрос, или исключение, брошенное в операторе RxJS.

  У этих ошибок status установлен в 0, а свойство error содержит объект ProgressEvent, чей type может предоставить дополнительную информацию.

HttpClient фиксирует оба вида ошибок в своем HttpErrorResponse. Проанализируйте этот ответ, чтобы определить причину ошибки.

Следующий пример определяет обработчик ошибок в ранее определенном ConfigService.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

private handleError(error: HttpErrorResponse) {
  if (error.status === 0) {
    // A client-side or network error occurred. Handle it accordingly.
    console.error('An error occurred:', error.error);
  } 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(() => new Error('Something bad happened; please try again later.'));
}

Обработчик возвращает RxJS ErrorObservable с удобным для пользователя сообщением об ошибке. Следующий код обновляет метод getConfig(), используя pipe для отправки всех наблюдаемых, возвращенных вызовом HttpClient.get() в обработчик ошибок.

1
2
3
4
5
6

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

Повторная попытка неудачного запроса¶

Иногда ошибка носит временный характер и исчезает автоматически при повторной попытке. Например, в мобильных сценариях часто случаются перебои в работе сети, и повторная попытка может привести к успешному результату.

Библиотека RxJS предлагает несколько операторов retry. Например, оператор retry() автоматически повторно подписывается на неудачный Observable заданное количество раз.

Переподписка на результат вызова метода HttpClient имеет эффект повторной выдачи HTTP-запроса.

В следующем примере показано, как передать неудачный запрос оператору retry() перед передачей его в обработчик ошибок.

1
2
3
4
5
6
7

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

Отправка данных на сервер¶

Помимо получения данных с сервера, HttpClient поддерживает другие методы HTTP, такие как PUT, POST и DELETE, которые вы можете использовать для изменения удаленных данных.

Пример приложения для данного руководства включает сокращенную версию примера "Tour of Heroes", который извлекает героев и позволяет пользователям добавлять, удалять и обновлять их. В следующих разделах приведены примеры методов обновления данных из HeroesService примера.

Комментарии