Angular Academy · Урок

Повторные попытки и индикаторы загрузки

Реализуйте повторные попытки и глобальные индикаторы загрузки

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

Две сквозные задачи

Перехватчики идеально подходят для двух общих для приложения задач: автоматически повторять неудачные запросы и отслеживать глобальное состояние loading, пока выполняется любой запрос.

Повторные попытки с retry

Передайте retry после next(req), чтобы повторять временно неудачные запросы.

import { retry } from 'rxjs';

export const retryInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(retry(2));

Повтор только безопасных запросов

Свободно повторяйте идемпотентные методы (GET, HEAD), но будьте осторожны с повторением POST/PUT, которое может привести к дубликатам. Проверяйте метод.

export const retryInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.method !== 'GET') return next(req);
  return next(req).pipe(retry(2));
};

Повтор с задержкой и экспоненциальным увеличением интервала

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

import { timer } from 'rxjs';

next(req).pipe(
  retry({
    count: 3,
    delay: (_err, n) => timer(Math.pow(2, n) * 500)
  })
);

Условные повторные попытки

Повторяйте запрос только при ошибках, допускающих повтор (5xx или сетевых ошибках), но не при клиентских ошибках 4xx, которые снова завершатся сбоем.

retry({
  count: 2,
  delay: (err, n) =>
    err.status >= 500 ? timer(n * 500) : throwError(() => err)
})

Глобальное состояние loading

Служба загрузки отслеживает количество активных запросов, чтобы интерфейс мог показывать глобальный индикатор загрузки.

export class LoadingService {
  private active = signal(0);
  readonly isLoading = computed(() => this.active() > 0);
  start() { this.active.update(n => n + 1); }
  stop()  { this.active.update(n => Math.max(0, n - 1)); }
}

Перехватчик загрузки

Увеличивайте счётчик при начале запроса и уменьшайте его при завершении, независимо от успеха или ошибки, используя finalize.

import { finalize } from 'rxjs';

export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
  const loading = inject(LoadingService);
  loading.start();
  return next(req).pipe(finalize(() => loading.stop()));
};

Зачем нужен finalize

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

Отображение индикатора загрузки

Свяжите сигнал загрузки с шаблоном корневого компонента.

// root component template:
// @if (loading.isLoading()) {
//   <app-spinner />
// }

Исключение фоновых запросов

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

import { HttpContextToken } from '@angular/common/http';
export const SKIP_LOADING = new HttpContextToken(() => false);
// in interceptor: if (req.context.get(SKIP_LOADING)) return next(req);

Объединение повторных попыток и загрузки

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

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

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

Итоги: индикаторы повторных попыток и загрузки

Перехватчики удобно обрабатывают повторные попытки и глобальную загрузку.

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

Вы завершили изучение перехватчиков HttpClient.

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

Урок «Повторные попытки и индикаторы загрузки» бесплатный?

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

Чему я научусь в уроке «Повторные попытки и индикаторы загрузки»?

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

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

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

Сколько времени занимает урок «Повторные попытки и индикаторы загрузки»?

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

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

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

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

← Назад к Angular Academy