Axios: що це, HTTP-запити та основи роботи з API

Що таке Axios?

Axios — це бібліотека на JavaScript, призначена для виконання HTTP-запитів з браузера та середовища Node.js. Вона побудована поверх XMLHttpRequest у браузері та модуля http у Node.js, надаючи єдиний API для обох платформ.

Основна перевага Axios перед нативним fetch — автоматична обробка JSON, пітримка перехоплювачів та зручніша робота з помилками. На відміну від fetch, Axios не вимагає двох викликів .then для отримання JSON-тіла відповіді та викидає виняток при HTTP-помилках (4xx, 5xx) автоматично.

Бібліотека пітримує всі основні HTTP-методи: GET, POST, PUT, DELETE, PATCH та HEAD. Можє використовуватися як у простих проєктах, так і у великих корпоративних додатках із сотнями тисяч запитів щодня.

Ключові характеристики Axios

• Promise API — всі операції повертають Promise, що спрощує асинхронний код
• Пітримка TypeScript — повна типізація для всіх методів та конфігурацій
• Перехоплювачі — middleware для обробки запитів та відповідей
• Трансформація — автоматичне перетворення даних на вході та виході

Архітектура Axios та принцип роботи

Архітектура Axios заснована на концепції адаптерів (adapters). Бібліотека абстрагує транспортний рівень: у браузері використовується XMLHttpRequest, у Node.js — модуль http або https. Це дозволяє мати єдиний інтерфейс незалежно від середовища виконання.

Кожен запит проходить через ланцюжок перехоплювачів (interceptors), які можуть модифікувати конфігурацію запиту або відповіді. Після інтерсепторів запит передається в адаптер, який виконує реальний HTTP-виклик. Відповідь потім проходить через відповідні інтерсептори перед тим, як потрапити до коду додатку.

Життєвий цикл запиту Axios

1. Створення конфігурації — метод, URL, заголовки, тіло запиту
2. Request interceptor — модифікація конфігурації, додавання токенів
3. HTTP-виклик — виконання через адаптер браузера або Node.js
4. Response interceptor — трансформація відповіді, обробка помилок
5. Повернення результату — Promise вирішується з даними або відхиляється

Основні можливості Axios

Axios включає безліч вбудованих можливостей, які роблять його зручним вибором для роботи з HTTP у мобільних та веб-додатках. Розглянемо ключові з них.

Автоматична трансформація даних

При надсиланні запиту Axios автоматично перетворює обєкт JavaScript у JSON-рядок за допомогою JSON.stringify. При отриманні відповіді бібліотека парсить JSON назад в обєкт. Це позбавляє розробника ручної серіалізації та десеріалізації даних.

Захист від CSRF

У браузерному середовищі Axios автоматично піставляє заголовки XSRF-TOKEN з cookie, захищаючи додаток від міжсайтової підробки запитів. Для цього достатньо налаштувати сервер на передачу токена в cookie з імѝям XSRF-TOKEN.

Таймаути та скасування запитів

Бібліотека пітримує встановлення таймауту через параметр timeout та скасування запиту через AbortController. Це особливо важливо в мобільних додатках з нестабільним зєднанням, де завислі запити споживають батарею та трафік.

Встановлення та налаштування Axios

Встановлення Axios виконується через будь-який пакетний менеджер. Бібліотека доступна в реєстрі npm та можє бути підключена як у Node.js, так і в браузерних проєктах. Для TypeScript типи включені в основний пакет, додаткових залежностей не потрібно.

Після встановлення можна створити екземпляр з базовою конфігурацією: базовий URL, таймаут за замовчуванням, спільні заголовки. Це дозволяє не повторювати однакові параметри в кожному запиті та централізовано керувати налаштуваннями HTTP-клієнта.

# Встановлення через npm
npm install axios

# Встановлення через yarn
yarn add axios

# Встановлення через pnpm
pnpm add axios

Створення екземпляра з конфігурацією

Рекомендується створювати окремий екземпляр Axios для кожного API-сервісу. Це дозволяє задати базовий URL, стандартні заголовки та таймаут, які будуть застосовуватися до всіх запитів цього екземпляра без повторення в кожному виклику.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

Приклади коду з Axios

Приклади запитів показують основні патерни використання Axios. Всі приклади використовують синтаксис async/await, який робить асинхронний код більш читабельним порівняно з ланцюжками .then().

GET-запит з параметрами

Для отримання даних з сервера використовується метод axios.get. Параметри запиту передаються через обєкт params, який автоматично перетворюється на query-string. Відповідь містить дані в полі data, статус у status та заголовки в headers.

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUsers() {
  try {
    const response = await api.get<User[]>('/users', {
      params: { page: 1, limit: 10 }
    });
    return response.data;
  } catch (error) {
    console.error('Помилка завантаження користувачів', error);
    throw error;
  }
}

POST-запит з тілом

Для надсилання даних на сервер використовується axios.post. Другим аргументом передається обєкт з даними, який Axios автоматично серіалізує в JSON. Тип контенту Content-Type за замовчуванням встановлюється в application/json.

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

async function createUser(data: CreateUserDto) {
  const response = await api.post<User>('/users', data);
  return response.data;
}

Перехоплювачі (Interceptors)

Інтерсептори — це middleware-функції, які виконуються для кожного запиту або відповіді. Вони дозволяють додавати токени авторизації, логувати запити, обробляти помилки централізовано. Request interceptor додає заголовок Authorization з токеном, вилученим зі сховища.

// Request interceptor — додає токен авторизації
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Response interceptor — обробляє 401 помилки
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

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

Обробка помилок в Axios будується на механізмі винятків. На відміну від fetch, Axios автоматично перехоплює HTTP-помилки (4xx, 5xx) і передає їх у catch-блок. Обєкт помилки містить інформацію про відповідь сервера, запит та контекст виконання.

Важливо розрізняти три типи помилок: помилка відповіді сервера (response), помилка запиту (request) та помилка налаштування (config). Перша виникає при успішному виконанні HTTP-виклику з кодом помилки, друга — при відсутності відповіді від сервера, третя — при невірній конфігурації запиту.

import axios, { AxiosError } from 'axios';

async function safeRequest() {
  try {
    return await api.get('/data');
  } catch (error) {
    if (error instanceof AxiosError) {
      if (error.response) {
        console.warn('Помилка відповіді', error.response.status);
      } else if (error.request) {
        console.warn('Немає відповіді від сервера');
      } else {
        console.warn('Помилка конфігурації');
      }
    }
  }
}

Порівняння Axios з Fetch API

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

Fetch не вважає HTTP-помилки (4xx, 5xx) винятками — потрібно перевіряти response.ok. Fetch вимагає двох викликів .then() для отримання JSON: response.json() потім повертає Promise з даними. Axios робить це автоматично. Fetch не пітримує прогрес завантаження файлів без додаткового поліфіла. Axios має вбудовані onUploadProgress та onDownloadProgress.

У Node.js Fetch доступний з версії 18 як експериментальна функція, а Axios працює стабільно починаючи з Node.js 10. Для проєктів, що пітримують старі версії Node.js, вибір очевидний на користь Axios. Для сучасних браузерних проєктів без складної обробки запитів fetch можє бути достатнім.