Окрім вбудованої функції fetch(), у JavaScript доступно кілька сторонніх бібліотек для виконання HTTP-запитів. Однією з найпопулярніших бібліотек є Axios ( Документація Axios). Ці бібліотеки пропонують додаткові можливості та переваги, які спрощують роботу з API та підвищують читабельність коду.

Чому варто використовувати Axios або інші бібліотеки замість вбудованого fetch()?

Хоча API fetch() є потужним, він має певні обмеження, які вирішують сторонні бібліотеки, такі як Axios:

• Автоматичний парсинг JSON: Axios автоматично обробляє JSON-відповіді, тоді як у випадку з fetch() потрібно вручну викликати response.json();
• Тайм-аути: Axios дозволяє встановлювати тайм-аути для запитів, що не підтримується нативно у fetch();
• Інтерцептори запитів та відповідей: Axios надає інтерцептори, які дозволяють виконувати функції перед відправкою запиту або після отримання відповіді, що корисно для додавання токенів автентифікації чи логування запитів;
• Простіший синтаксис: Axios має простіший і більш послідовний синтаксис для виконання запитів та обробки відповідей;
• Підтримка старих браузерів: Axios має вбудовану підтримку старих браузерів, які можуть не повністю підтримувати нативний API fetch().

Базове використання Axios

Axios забезпечує простий синтаксис для виконання як GET, так і POST запитів. Він повертає Promises, як і fetch(), але автоматично обробляє деякі рутинні завдання, наприклад, парсинг JSON.

GET-запит з використанням Axios

Цей приклад демонструє використання Axios для GET-запиту. Функція getPostWithAxios викликає axios.get() для отримання даних з API-ендпоінту (/posts/1). Axios спрощує процес, автоматично розбираючи JSON-відповідь, що усуває необхідність окремого виклику .json(). Блок try...catch обробляє всі помилки, відображаючи або заголовок поста, або повідомлення про помилку в HTML.

POST-запит з Axios

Цей приклад демонструє POST-запит із використанням Axios для надсилання даних до API. Функція sendPostWithAxios викликає axios.post() із кінцевою точкою API (/posts) та даними для нового поста, включаючи title, body та userId. Axios автоматично надсилає дані у форматі JSON, що спрощує процес. Блок try...catch обробляє всі помилки, відображаючи або назву створеного поста, або повідомлення про помилку в HTML.

Обробка помилок з Axios

Axios надає простий у використанні механізм для обробки помилок. Якщо запит не вдається (наприклад, через мережеву проблему або помилку сервера), Axios автоматично генерує помилку, яку можна обробити за допомогою try...catch.

Цей приклад демонструє обробку помилок з Axios. Функція getInvalidPost намагається отримати дані з неіснуючого кінцевого пункту за допомогою axios.get(). Коли запит не вдається, Axios автоматично генерує помилку. Блок try...catch перехоплює цю помилку та відображає повідомлення про помилку в HTML.

Додаткові можливості та переваги Axios

Розглянемо деякі додаткові можливості Axios.

Перехоплювачі запитів і відповідей

Axios дозволяє перехоплювати запити та відповіді для їх модифікації перед обробкою. Це корисно для додавання токенів автентифікації, логування запитів або глобального керування помилками.

axios.interceptors.request.use(
  config => {
    // Modify request config (e.g., add authentication token)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Підтримка тайм-ауту

Axios дозволяє встановлювати тайм-аути для запитів, що гарантує уникнення нескінченного очікування відповіді.

axios
  .get('https://jsonplaceholder.typicode.com/posts/1', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Request timed out', error));

Спрощене оброблення помилок

Axios автоматично генерує помилки, якщо статус відповіді виходить за межі діапазону 2xx, що дозволяє обробляти збої у стандартизований спосіб.

Підтримка браузерів

Axios працює у всіх сучасних браузерах і надає поліфіли для старіших версій, що робить його більш універсальним вибором для деяких проєктів.