> Какой опыт с библиотеками для работы с API, например Axios? (JavaScript)

Короткий ответ

Имею обширный опыт работы с Axios и fetch API. Axios предпочитаю за встроенные интерцепторы, автоматическую трансформацию JSON и удобную обработку ошибок. В проектах использовал для REST API, загрузки файлов с прогрессом и создания оберток с повторными попытками. Для SSR и изоморфных приложений применял универсальные решения. При необходимости тонкого контроля над запросами использовал fetch с кастомными обертками.

Подробное объяснение

Axios - это HTTP-клиент на промисах, который решает несколько ключевых задач: автоматическая сериализация/десериализация JSON, поддержка interceptors для логирования и модификации запросов/ответов, встроенная защита от XSRF, возможность отмены запросов через CancelToken (или AbortController в новых версиях). В отличие от fetch, Axios не требует ручной проверки response.ok и оборачивания в .json(). Однако fetch более нативный, легче по размеру и поддерживает Streams API. Выбор между ними зависит от контекста: для крупных проектов с множеством запросов Axios дает больше готовых решений, для микрофронтендов или edge-функций fetch предпочтительнее.

На практике

В реальных проектах я обычно создаю единый экземпляр Axios с базовым URL, таймаутами и заголовками. Interceptors использую для автоматического добавления токена авторизации, логирования времени ответа и глобальной обработки ошибок (например, редирект на 401). Для загрузки файлов настраиваю onUploadProgress для отображения прогресс-бара. При работе с GraphQL использую Axios как транспорт, оборачивая запросы в единый POST-эндпоинт. В тестах мокирую Axios через axios-mock-adapter или MSW.

Пример кода

JAVASCRIPT
import axios from 'axios';

const api = axios.create({
  baseURL: process.env.API_URL,
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});

// Interceptor для токена
api.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// Interceptor для ошибок
api.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

// Загрузка с прогрессом
export const uploadFile = (file, onProgress) => {
  const formData = new FormData();
  formData.append('file', file);
  return api.post('/upload', formData, {
    onUploadProgress: (progressEvent) => {
      const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
      onProgress(percent);
    }
  });
};

Как отвечать на собеседовании

Начни с конкретного опыта: какие библиотеки использовал и в каких проектах. Покажи понимание trade-off между Axios и fetch. Упомяни продвинутые сценарии: отмена запросов, retry-логика, работа с кэшированием. Если спрашивают про альтернативы - расскажи про ky, got или swr. Важно продемонстрировать не просто знание API, а понимание, когда и почему выбирать то или иное решение.

Что проверяет интервьюер

Интервьюер оценивает глубину понимания сетевых запросов во frontend: умение работать с асинхронностью, обработкой ошибок, производительностью (например, избегание утечек памяти при отмене запросов). Также проверяется способность проектировать архитектуру HTTP-клиента в масштабируемом приложении и знание современных стандартов (AbortController, fetch vs XHR).

Типичные ошибки

Кандидаты часто забывают про отмену запросов при размонтировании компонента, что приводит к race conditions. Другая ошибка - игнорирование глобальной обработки ошибок и дублирование try-catch в каждом компоненте. Также распространено неправильное использование interceptors для мутации ответов, что усложняет отладку. Не стоит путать Axios с библиотеками для управления состоянием (Redux, Zustand) - это разные уровни абстракции.