Angular Academy · Урок

Операторы обработки ошибок

Восстанавливайте работу с помощью catchError и retry.

«Операторы обработки ошибок» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Ошибки в наблюдаемых последовательностях

Когда наблюдаемая последовательность выдаёт ошибку, она завершается: новые значения больше не выдаются, а запускается обработчик ошибок. Операторы обработки ошибок позволяют восстановиться, повторить попытку или преобразовать ошибку, не прерывая поток.

Путь обработки ошибки

Обрабатывайте ошибки в наблюдателе или с помощью операторов. Без обработки необработанная ошибка может привести к сбою подписки.

this.http.get('/api/data').subscribe({
  next: d => console.log(d),
  error: err => console.error('failed', err)
});

catchError

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

import { catchError, of } from 'rxjs';

this.http.get('/api/data').pipe(
  catchError(err => {
    console.error(err);
    return of([]); // fallback value
  })
).subscribe(data => console.log(data));

Выборочное повторное выбрасывание

Внутри catchError можно проверить ошибку и решить, восстановиться или повторно выбросить её с помощью throwError.

import { catchError, throwError, of } from 'rxjs';

source$.pipe(
  catchError(err =>
    err.status === 404 ? of(null) : throwError(() => err)
  )
).subscribe();

retry

retry(n) при ошибке подписывается на источник повторно до n раз — это полезно при временных сбоях сети.

import { retry } from 'rxjs';

this.http.get('/api/flaky').pipe(
  retry(2) // try up to 3 times total
).subscribe(d => console.log(d));

retry с настройками

Вариант с объектом добавляет задержку между попытками (и поддерживает функцию постепенного увеличения задержки), предотвращая чрезмерную нагрузку на сервер.

this.http.get('/api/flaky').pipe(
  retry({ count: 3, delay: 1000 })
).subscribe(d => console.log(d));

Отложенное повторение в стиле retryWhen

Для экспоненциального увеличения задержки параметр delay может быть функцией, возвращающей наблюдаемую последовательность, которая с каждой попыткой задерживает выполнение на всё больший срок.

import { timer } from 'rxjs';

source$.pipe(
  retry({
    delay: (err, count) => timer(count * 1000)
  })
).subscribe();

catchError после retry

Объединяйте их: повторяйте попытки при временных сбоях, а затем корректно переходите к запасному варианту, если попытки исчерпаны.

this.http.get('/api/data').pipe(
  retry({ count: 2, delay: 500 }),
  catchError(() => of([]))
).subscribe(data => console.log(data));

Расположение имеет значение

Положение catchError в конвейере определяет область действия. Внутри switchMap он перехватывает ошибки каждого внутреннего запроса, сохраняя внешний поток активным; в конце он перехватывает все ошибки.

term$.pipe(
  switchMap(t => this.http.get('/api?q=' + t).pipe(
    catchError(() => of([])) // outer stream survives
  ))
).subscribe();

EMPTY как тихий запасной вариант

Возврат EMPTY из catchError завершает поток без выдачи значения — это полезно, если нужно подавить ошибку и ничего не выдавать.

import { EMPTY, catchError } from 'rxjs';

source$.pipe(
  catchError(() => EMPTY)
).subscribe();

finalize для очистки

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

import { finalize, catchError, of } from 'rxjs';

this.loading = true;
source$.pipe(
  catchError(() => of([])),
  finalize(() => this.loading = false)
).subscribe();

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете обработку ошибок.

Повторение: операторы обработки ошибок

Ошибки завершают поток, если их не обработать.

catchError: восстанавливает работу, возвращая заменяющую наблюдаемую последовательность.
retry: повторно подписывается после сбоя, при необходимости используя задержку или постепенное увеличение задержки.
Расположение (внутри switchMap или в конце) определяет область действия.

Вы завершили изучение RxJS Operators in Depth.

Часто задаваемые вопросы

Урок «Операторы обработки ошибок» бесплатный?

Да — полный текст урока «Операторы обработки ошибок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Операторы обработки ошибок»?

Восстанавливайте работу с помощью catchError и retry. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Операторы обработки ошибок»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy