Как организовать запросы к API во frontend-приложении?

Запросы к API организуют через централизованный слой: единый клиент (axios instance с интерсепторами), сервисный слой (функции по доменам), кеширование через TanStack Query/SWR, обработку ошибок и типизацию.

Организация API-слоя

Централизованный клиент

Единый настроенный axios/fetch-инстанс:

const api = axios.create({ baseURL: '/api', timeout: 5000 });

// Интерсепторы — токен, обработка ошибок
api.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});
api.interceptors.response.use(null, handleError); // 401 → refresh, логирование

Сервисный слой (по доменам)

Функции запросов сгруппированы по сущностям:

// api/users.ts
export const usersApi = {
  getAll: () => api.get('/users'),
  getById: (id) => api.get(`/users/${id}`),
  create: (data) => api.post('/users', data),
};

Компоненты не вызывают fetch напрямую — только сервисы.

Кеширование серверного состояния

TanStack Query/SWR — кеш, рефетч, инвалидация, статусы загрузки/ошибки:

const { data, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: usersApi.getAll,
});

Типизация

Типы запросов/ответов (из OpenAPI-генерации или вручную).

Обработка ошибок

Централизованно (интерсептор) + локально (в компонентах/мутациях).

Принципы

• Разделение — API-логика отдельно от UI.
• Переиспользование — сервисы вызываются из разных мест.
• Единая точка — базовый URL, заголовки, обработка ошибок в одном месте.
• Отмена — AbortController для устаревших запросов.

Коротко для собеседования

Запросы к API организуют: централизованный клиент (axios instance с интерсепторами — токен, обработка 401/ошибок), сервисный слой по доменам (usersApi.getAll — компоненты не вызывают fetch напрямую), кеширование серверного состояния (TanStack Query/SWR — рефетч, инвалидация, статусы), типизация, обработка ошибок (интерсептор + локально), отмена (AbortController). Разделение API-логики и UI.