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 может быть достаточным.