В чем разница между AJAX, XMLHttpRequest, Fetch и Axios

Question

В чем разница между AJAX, XMLHttpRequest, Fetch и Axios

Тип вопроса: Асинхронность Вероятность: 10% Категория: Frontend Разработчик

Ответ

AJAX — это концепция асинхронного обмена данными между клиентом и сервером без перезагрузки страницы. XMLHttpRequest (XHR) — это старый нативный API браузера для реализации AJAX.

Fetch — современный API, работающий на промисах, более удобный и гибкий, чем XHR.

Axios — сторонняя библиотека для HTTP-запросов, работает как в браузере, так и в Node.js, поддерживает промисы, перехватчики и автоматическое преобразование JSON.

Пример Fetch:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

Пример Axios:

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

Основные отличия:

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

Ответ 18+ 🔞

Так, слушай, вот сидишь ты такой, пишешь на фронтенде, и тут тебе надо с сервером пообщаться, но чтобы страница не дергалась, как сука в припадке. Это и есть AJAX, если по-простому. Раньше для этого был XMLHttpRequest, или, как его все любят называть, XHR. Старый, уродливый, как манда с ушами, код на нём писать — тот ещё геморрой. Но работал.

Потом умные люди придумали Fetch API. Ну, вроде как современно, на промисах, встроен прямо в браузер. Выглядит поприятнее, да. Но есть нюанс, ёпта! Fetch не считает статусы HTTP 4xx-5xx ошибкой, понимаешь? Сервер может тебе ответить «404 — не найдено, иди нахуй», а fetch скажет «всё ок, запрос же выполнился». Надо вручную проверять response.ok. Волнение ебать, честно.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`Ой, всё! ${response.status}`); // Вот тут-то и вылезает хитрая жопа
    }
    return response.json();
  })
  .then(data => console.log(data));

А потом появился Axios. Сторонняя библиотека, но, блядь, какая удобная! Она как тот друг, который всё за тебя сделает: и JSON распарсит автоматом, и ошибки по статусам сам бросит, и даже можно перехватчики настроить, чтобы перед каждым запросом, например, токен прилеплять. Красота!

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data)); // Всё, data уже тут, не надо response.json() вызывать
  .catch(error => console.error('Всё пропало!', error)); // И ошибки ловит, как миленькие

Короче, резюмирую, чтобы в голове отложилось:

XHR — это дед, который всё ещё где-то ползает в легаси-коде. Работает, но общаться с ним — терпения ноль ебать.
Fetch — современный инструмент в браузере. Мощный, но с приколами. За ошибками сам следи, чих-пых тебя в сраку.
Axios — готовый кайфули. Поставил библиотеку — и париться меньше. Для сложных проектов часто выбор именно его, ибо нехуй себе мозги выносить.

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