В чём отличие Axios от Fetch? Что такое интерцепторы?

Основные различия между Axios и Fetch

Fetch — это встроенный API браузера, который возвращает Promise и работает на основе стандарта WHATWG. Axios — это сторонняя библиотека, построенная поверх XMLHttpRequest в браузере и http-модуля в Node.js. Главное отличие — в удобстве и функциональности: Axios автоматически преобразует ответ в JSON, обрабатывает ошибки HTTP-статусов как отклонённые промисы, поддерживает отмену запросов и прогресс загрузки. Fetch требует вручную проверять response.ok и вызывать response.json().

Что такое интерцепторы

Интерцепторы — это функции, которые выполняются до отправки запроса и после получения ответа. Они позволяют централизованно добавлять заголовки (например, токен авторизации), логировать запросы, обрабатывать ошибки или повторять запросы при сбоях. В Axios интерцепторы настраиваются через axios.interceptors.request.use() и axios.interceptors.response.use(). В Fetch такой возможности нет, поэтому приходится оборачивать fetch в свои функции.

Пример кода

// Fetch: ручная обработка ошибок и JSON
fetch('/api/user')
  .then(response => {
    if (!response.ok) throw new Error('HTTP error');
    return response.json();
  })
  .catch(err => console.error(err));

// Axios: автоматическая обработка и интерцепторы
axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
});

axios.get('/api/user')
  .then(response => console.log(response.data))
  .catch(err => console.error(err));

Вывод

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