Почему используешь Axios вместо fetch?

Почему используешь Axios вместо fetch?

Это классический вопрос на собеседованиях, которое тестирует твое понимание различий между HTTP-клиентами. Правильный ответ должен показать, что ты знаешь оба подхода и можешь обосновать выбор.

Основные различия

1. Синтаксис и удобство

Fetch - встроенный в браузер, но более многословный:

// fetch требует явной обработки JSON
fetch('https://api.example.com/users')
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Axios - сокращает boilerplate код:

// Axios автоматически парсит JSON
axios.get('https://api.example.com/users')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

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

Fetch - не отклоняет promise при ошибке HTTP (4xx, 5xx):

fetch('/api/users')
  .then(response => {
    // response.ok это false для 404, 500 и т.д.
    // но promise все равно resolve-ится!
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .catch(error => console.error(error));

Axios - отклоняет promise для любых ошибок:

axios.get('/api/users')
  .catch(error => {
    // Ловит и сетевые ошибки, и HTTP 4xx/5xx
    console.error(error.response?.status); // 404, 500 и т.д.
  });

3. Интерцепторы (Interceptors)

Fetch - нет встроенной поддержки интерцепторов:

// Нужно писать обертку вручную
const fetchWithAuth = (url, options = {}) => {
  const headers = {
    ...options.headers,
    'Authorization': `Bearer ${token}`
  };
  return fetch(url, { ...options, headers });
};

// Потом везде использовать fetchWithAuth вместо fetch

Axios - встроенные интерцепторы:

// Глобальный интерцептор для всех запросов
axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// Глобальный интерцептор для ошибок
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // обновить токен
    }
    return Promise.reject(error);
  }
);

4. Timeout

Fetch - нет встроенного timeout (требуется AbortController):

// Сложный способ с AbortController
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch('/api/users', { signal: controller.signal })
  .finally(() => clearTimeout(timeoutId));

Axios - встроенный timeout:

// Просто и понятно
axios.get('/api/users', { timeout: 5000 });

5. Отмена запросов (Cancellation)

Fetch - требует AbortController (сложнее для новичков):

const controller = new AbortController();

const request = fetch('/api/users', { signal: controller.signal });

// Отменить запрос
controller.abort();

Axios - встроенные cancel tokens:

const source = axios.CancelToken.source();

const request = axios.get('/api/users', {
  cancelToken: source.token
});

// Отменить запрос
source.cancel('Operation canceled');

6. Трансформация данных

Fetch - нет встроенной трансформации:

fetch('/api/users')
  .then(r => r.json())
  .then(data => {
    // Вручную трансформировать данные
    return data.map(user => ({
      id: user.id,
      fullName: `${user.firstName} ${user.lastName}`
    }));
  });

Axios - встроенные трансформаторы:

const axiosInstance = axios.create({
  transformResponse: [(data) => {
    const parsed = JSON.parse(data);
    return parsed.map(user => ({
      id: user.id,
      fullName: `${user.firstName} ${user.lastName}`
    }));
  }]
});

axiosInstance.get('/api/users');

7. Размер и производительность

// Fetch - встроенный в браузер (0 KB)
// Axios - отдельная библиотека (~13 KB gzipped)

// Для production критична размер, особенно для мобильных

Когда выбрать Fetch?

// 1. Простой проект с простыми запросами
fetch('/api/posts').then(r => r.json()).then(console.log);

// 2. Когда размер имеет значение (mobile-first приложение)
// Fetch экономит ~13 KB

// 3. Когда не нужны интерцепторы и сложная конфигурация

// 4. Современный стек (если используешь React Query, SWR)
// Они уже обрабатывают сложность fetch

Когда выбрать Axios?

// 1. Сложный API с множеством запросов и интерцепторов
const api = axios.create({ baseURL: 'https://api.example.com' });

api.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// 2. Нужна подробная конфигурация
const api = axios.create({
  timeout: 10000,
  headers: { 'X-Custom-Header': 'value' },
  withCredentials: true
});

// 3. Нужна отмена запросов
const source = axios.CancelToken.source();

// 4. Старые браузеры или Node.js (обратная совместимость)

Практическая рекомендация

// Moderne решение - React Query + Fetch
import { useQuery } from '@tanstack/react-query';

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: async () => {
    const response = await fetch('/api/users');
    if (!response.ok) throw new Error('Failed to fetch');
    return response.json();
  }
});

// React Query обеспечивает кэширование и обновление
// Fetch экономит ~13 KB
// Оба фактора важнее чем удобство Axios

Сравнительная таблица

Честный ответ на собеседовании

"Я использую fetch с React Query потому что это дает лучший баланс:

1. Fetch - встроенный, не требует зависимостей
2. React Query - обеспечивает кэширование, синхронизацию, отмену запросов
3. Вместе они устраняют все недостатки fetch, которые решает Axios
4. При этом экономим ~13 KB и не зависим от дополнительной библиотеки

Если проект уже использует Axios - буду придерживаться его. Главное - понимать механику и выбирать инструмент осознанно, а не по привычке."