В чём разница между нативным fetch и библиотекой Axios? Какие плюсы и минусы каждого подхода?

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

Fetch — это нативный API браузера для выполнения HTTP-запросов, основанный на промисах. Axios — популярная сторонняя библиотека, предоставляющая более удобный интерфейс и дополнительные возможности.

Ключевые отличия

• Обработка JSON: Fetch требует вызова response.json(), Axios автоматически парсит ответ.
• Обработка ошибок: Fetch не отклоняет промис при HTTP-ошибках (например, 404), Axios делает это автоматически.
• Перехватчики (interceptors): Axios поддерживает перехватчики запросов и ответов, fetch — нет.
• Отмена запросов: Axios использует CancelToken, fetch — AbortController.
• Прогресс загрузки: Axios поддерживает отслеживание прогресса, fetch — только через ReadableStream.

Примеры кода

Fetch:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('HTTP error');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

Axios:

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(err => console.error(err));

Вывод

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