Работа с API и состоянием: лучшие практики

Коротко. Любой запрос к API — это три состояния: загрузка, успех, ошибка. Джуну важно всегда обрабатывать все три, а не только «успех». Для простого проекта хватает fetch + useState/useEffect; когда запросов много, помогает библиотека вроде React Query с кэшированием.

Запрос к API

Базовый fetch с обработкой ошибки:

async function getUsers() {
  const res = await fetch("/api/users");
  if (!res.ok) throw new Error("Ошибка " + res.status);
  return res.json();
}

Проверка res.ok обязательна: fetch не бросает исключение на статус 404 или 500 сам по себе. Что вообще значат статусы и методы — в статье REST API от А до Я.

Три состояния запроса

Типовой паттерн на хуках:

function Users() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    getUsers()
      .then(setData)
      .catch((e) => setError(e.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>Загрузка...</p>;
  if (error) return <p>Ошибка: {error}</p>;
  return <List items={data} />;
}

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

Когда нужен React Query

Когда запросов много, ручной useState/useEffect превращается в кашу. Библиотеки (React Query / TanStack Query) дают из коробки:

• кэширование и дедупликацию запросов;
• автоматические повторы и обновление данных;
• состояния loading/error без ручного кода.

Для портфолио джуна знать React Query необязательно, но упомянуть, что понимаете, зачем он нужен, — плюс на собеседовании.

Гонки запросов и отмена

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

useEffect(() => {
  const ac = new AbortController();
  fetch("/api/search?q=" + q, { signal: ac.signal })
    .then((r) => r.json())
    .then(setData)
    .catch((e) => { if (e.name !== "AbortError") setError(e.message); });
  return () => ac.abort(); // отменяем при новом запросе
}, [q]);

Этот паттерн отличает вдумчивого джуна от того, кто «просто дёргает fetch».

Частые ошибки

• ❌ Не обрабатывать ошибку и загрузку — «белый экран» у пользователя.
• ❌ Забыть массив зависимостей в useEffect — бесконечные запросы.
• ❌ Не проверять res.ok — ошибки сервера проходят как «успех».
• ❌ Хранить в состоянии то, что можно вычислить из имеющихся данных.

Состояния UI, которые забывают новички

loading / success / empty / error — четыре обязательных. Плюс retry, отмена запроса при размонтировании, не гонять N одинаковых fetch. Глобальный store не нужен, пока props/context хватает. Серверный кэш (React Query и аналоги) часто проще самописного Redux «на всё».

Следующий шаг во фронтенде

Примените идеи из «Работа с API и состоянием: лучшие практики» к своему учебному проекту или к одной вакансии на этой неделе. Сделайте маленький артефакт в git: компонент/страница с адаптивном, один fetch к API, обработка loading/error. Карта обучения: что учить фронтендеру, полный план — старт 2026, проекты — React для портфолио. Обзор роли — фронтенд на уровне джуна.

Проверьте три состояния запроса

Сделайте экран списка с загрузкой, пустым ответом и ошибкой API. Искусственно задержите ответ и быстро смените фильтр: старый запрос не должен перезаписать новый результат. Добавьте повторную попытку и проверку этого сценария.

По теме: REST API от А до Я, что учить фронтендеру, старт 2026, React для портфолио, фронтенд на уровне джуна, профессии.

Частые вопросы

fetch или axios?
Для старта хватает встроенного fetch. axios удобнее для сложных случаев, но это не обязательный навык джуна.

Нужен ли Redux джуну?
Часто нет. Начните со встроенного состояния React; глобальный стейт-менеджер добавляйте, когда реально понадобится.

Что показывать при загрузке?
Спиннер или скелетон. Главное — не пустой экран без обратной связи.

Где хранить токен авторизации?
Тема отдельного разбора — см. авторизация и сессии. Если коротко: не в коде и осторожно с localStorage.

Материал «Работа с API и состоянием: лучшие практики» имеет смысл только вместе с практикой: один артефакт в git на этой неделе важнее десяти вкладок с теорией. Если застряли на выборе роли — начните с профессий и одной вакансии-ориентира.