Frontend Academy · Урок

Обработка состояний загрузки и ошибки

Добавляйте в компонент переменные состояния загрузки и ошибки, показывайте индикатор во время получения данных и выводите понятное сообщение об ошибке при сбое.

Урок 3 из 413 шагов

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

Три состояния асинхронных данных

Любая асинхронная операция с данными имеет три состояния: загрузка (запрос выполняется), успех (данные получены), ошибка (запрос не выполнен). Ваш интерфейс должен явно обрабатывать все три.

Интерфейс загрузки

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

if (loading) {
  return (
    <div className="loading-state">
      <Spinner size="lg" />
      <p>Loading users...</p>
    </div>
  );
}

Интерфейс ошибки

Показывайте понятное сообщение об ошибке, если запрос не выполнен. Добавьте действие для повторной попытки, чтобы пользователь не оказался в тупике. Записывайте полную ошибку в журнал для разработчиков.

if (error) {
  return (
    <div className="error-state">
      <p>Failed to load data: {error}</p>
      <button onClick={() => setRetry(n => n + 1)}>Try Again</button>
    </div>
  );
}

Механизм повторной попытки

Увеличивайте счётчик повторных попыток в состоянии и добавляйте его в массив зависимостей эффекта. Когда пользователь нажимает «Повторить», счётчик изменяется, и эффект запускается снова.

const [retry, setRetry] = useState(0);

useEffect(() => {
  // fetch...
}, [userId, retry]); // retry in deps triggers re-fetch

<button onClick={() => setRetry(n => n + 1)}>Retry</button>

Оптимистичные обновления

Оптимистичные обновления: немедленно обновляйте интерфейс до подтверждения со стороны сервера, а затем возвращайте прежнее состояние, если запрос не выполнен. Это создаёт впечатление мгновенной реакции.

// Optimistic:
const prevItems = items;
setItems(items.filter(i => i.id !== id)); // immediate UI update
try {
  await deleteItem(id);
} catch (err) {
  setItems(prevItems); // revert on failure
  showError('Delete failed. Changes reverted.');
}

Границы ошибок для ошибок рендеринга

Используйте границы ошибок (компоненты-классы с componentDidCatch), чтобы перехватывать ошибки, возникающие во время рендеринга. Они показывают интерфейс fallback вместо аварийного завершения всего приложения.

Сопоставление HTTP-ошибок

Сопоставляйте коды состояния HTTP с понятными для пользователя сообщениями. 401 → перенаправить на страницу входа. 403 → показать «Доступ запрещён». 404 → «Не найдено». 429 → «Слишком много запросов — подождите». 500+ → «Ошибка сервера — попробуйте снова».

function mapStatusToMessage(status: number): string {
  if (status === 401) return 'Please sign in to continue';
  if (status === 403) return 'You don\'t have permission to do this';
  if (status === 404) return 'This item no longer exists';
  if (status === 429) return 'Too many requests. Please wait a moment';
  if (status >= 500) return 'Server error. We\'re looking into it';
  return 'Something went wrong';
}

useReducer для сложного состояния получения данных

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

type FetchState<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; message: string };

const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });

Suspense — будущее

Suspense в React вместе с платформами получения данных (React Query, Relay, Next.js) позволяет компонентам приостанавливать выполнение в ожидании данных. Родительская граница Suspense автоматически показывает интерфейс fallback. Именно в этом направлении развивается React.

Сетевая ошибка и ошибка сервера

Сетевые ошибки (нет соединения, CORS) попадают в блок catch. Ошибки сервера (4xx, 5xx) завершаются обычным образом — для их обнаружения необходимо проверить res.ok. Обработка ошибок должна охватывать обе категории.

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

Что такое «оптимистичное обновление»?

Ответь в интерактивном уроке

Повторение: состояния загрузки и ошибки

Всегда обрабатывайте состояния загрузки, успеха и ошибки. Показывайте содержательный интерфейс загрузки. Сопоставляйте HTTP-ошибки с понятными для пользователя сообщениями. Реализуйте механизмы повторной попытки. Используйте оптимистичные обновления для мгновенной обратной связи. Применяйте useReducer для согласованного состояния получения данных. В будущем Suspense ещё больше упростит этот шаблон.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

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

Курсы: 41
Уроки: 163

Начать учиться бесплатно Посмотреть полный курс

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

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

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

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

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

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

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

Сколько времени занимает урок «Обработка состояний загрузки и ошибки»?

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

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

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

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

← Назад к Frontend Academy