Axios JavaScript (Node.js): методы, примеры, установка |…

Что такое Axios и зачем он нужен?

Axios — это мощная и популярная JavaScript-библиотека для выполнения HTTP-запросов. Она работает как в браузере, так и в среде Node.js, предоставляя единый, удобный API на основе Promise. Если вам нужно отправить GET-запрос к API, загрузить данные на сервер через POST или обработать ответ в формате JSON — Axios справится с этим элегантно и эффективно.

Зачем использовать Axios вместо встроенного fetch или XMLHttpRequest?

Автоматическая обработка JSON: Axios автоматически преобразует ответы в JSON, избавляя от необходимости вызывать response.json().
Перехватчики (Interceptors): Вы можете легко добавить глобальную логику для всех запросов (например, авторизационные токены) или ответов (например, обработка ошибок).
Отмена запросов: Встроенная поддержка отмены запросов через AbortController.
Защита от CSRF: Автоматическая работа с XSRF-токенами для повышения безопасности.
Прогресс загрузки: Возможность отслеживать прогресс отправки и получения данных.
Удобная обработка ошибок: Более информативные сообщения об ошибках и возможность легко различать статусы ответов.
Поддержка старых браузеров: В отличие от fetch, Axios работает в Internet Explorer 11 и других устаревших браузерах.

Установка

Установка Axios в проект Node.js или фронтенд-проект (через npm/yarn/pnpm) выполняется одной командой:

# Установка через npm (рекомендуется)
npm install axios

# Установка через yarn
yarn add axios

# Установка через pnpm
pnpm add axios

Для использования в браузере вы также можете подключить Axios через CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Быстрый старт

После установки вы можете сразу начать делать запросы. Вот простейший пример GET-запроса к публичному API:

// Импортируем библиотеку (для Node.js или модульных проектов)
import axios from 'axios';

// Делаем GET-запрос к JSONPlaceholder API
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log('Статус ответа:', response.status);
    console.log('Данные:', response.data);
  })
  .catch(error => {
    console.error('Ошибка запроса:', error.message);
  });

Этот код отправит GET-запрос, получит ответ и выведет его статус и тело (которое уже автоматически распарсено из JSON в объект JavaScript).

Основные методы и функции

Axios предоставляет удобные методы-обертки для всех основных HTTP-методов. Каждый из них возвращает Promise.

1. `axios.get(url, config?)`

Что делает: Выполняет HTTP GET-запрос для получения данных с сервера.

Параметры:

url (string) — URL-адрес запроса.
config (object, необязательно) — Объект конфигурации Axios (например, headers, params для query-строки, timeout).

Пример:

// Запрос с query-параметрами
axios.get('https://api.example.com/users', {
  params: {
    page: 2,
    limit: 10
  },
  headers: {
    'Authorization': 'Bearer my-token'
  }
})
.then(response => {
  console.log(response.data);
});

2. `axios.post(url, data?, config?)`

Что делает: Выполняет HTTP POST-запрос для отправки данных на сервер (обычно для создания нового ресурса).

Параметры:

url (string) — URL-адрес.
data (object, необязательно) — Данные, которые будут отправлены в теле запроса. Axios автоматически сериализует объект в JSON.
config (object, необязательно) — Объект конфигурации.

Пример:

const newUser = {
  name: 'Иван Петров',
  email: 'ivan@example.com'
};

axios.post('https://api.example.com/users', newUser, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  console.log('Пользователь создан:', response.data);
})
.catch(error => {
  console.error('Ошибка создания:', error.response?.data);
});

3. `axios.put(url, data?, config?)`

Что делает: Выполняет HTTP PUT-запрос для полной замены существующего ресурса.

Параметры: Аналогичны axios.post().

Пример:

const updatedUser = {
  name: 'Петр Сидоров',
  email: 'petr@example.com'
};

axios.put('https://api.example.com/users/1', updatedUser)
.then(response => {
  console.log('Пользователь обновлен:', response.data);
});

4. `axios.patch(url, data?, config?)`

Что делает: Выполняет HTTP PATCH-запрос для частичного обновления ресурса.

Параметры: Аналогичны axios.post().

Пример:

// Обновляем только email пользователя
axios.patch('https://api.example.com/users/1', {
  email: 'new-email@example.com'
})
.then(response => {
  console.log('Email обновлен:', response.data);
});

5. `axios.delete(url, config?)`

Что делает: Выполняет HTTP DELETE-запрос для удаления ресурса.

Параметры:

url (string) — URL-адрес.
config (object, необязательно) — Объект конфигурации.

Пример:

axios.delete('https://api.example.com/users/1')
.then(response => {
  console.log('Пользователь удален. Статус:', response.status);
})
.catch(error => {
  console.error('Не удалось удалить:', error.message);
});

6. `axios.request(config)`

Что делает: Базовый метод для выполнения запроса с произвольным HTTP-методом. Полезен, когда метод нужно задать динамически.

Параметры:

config (object) — Объект конфигурации, который обязательно должен содержать свойство method.

Пример:

const method = 'GET'; // или 'POST', 'PUT' и т.д.
axios.request({
  method: method,
  url: 'https://api.example.com/data',
  headers: { 'X-Custom-Header': 'foobar' }
})
.then(response => console.log(response.data));

7. `axios.all(iterable)` (Устарел, но все еще используется)

Что делает: Позволяет выполнить несколько запросов параллельно и дождаться завершения всех. Рекомендуется использовать Promise.all(), но axios.all все еще встречается в старых проектах.

Параметры:

iterable (массив Promise) — Массив запросов Axios.

Пример:

const request1 = axios.get('https://api.example.com/users');
const request2 = axios.get('https://api.example.com/posts');

axios.all([request1, request2])
  .then(axios.spread((usersResponse, postsResponse) => {
    console.log('Пользователи:', usersResponse.data);
    console.log('Посты:', postsResponse.data);
  }));

8. `axios.create(config)`

Что делает: Создает новый экземпляр Axios с пользовательской конфигурацией. Это основной способ организации работы с API, так как позволяет задать базовый URL, общие заголовки и перехватчики один раз.

Параметры:

config (object) — Объект конфигурации по умолчанию для нового экземпляра.

Пример:

// Создаем экземпляр для работы с GitHub API
const githubApi = axios.create({
  baseURL: 'https://api.github.com',
  timeout: 5000,
  headers: {
    'Accept': 'application/vnd.github.v3+json',
    'Authorization': 'token YOUR_GITHUB_TOKEN'
  }
});

// Теперь все запросы через githubApi будут использовать эту конфигурацию
githubApi.get('/users/octocat')
  .then(response => console.log(response.data));

9. `axios.interceptors.request.use(onFulfilled, onRejected)`

Что делает: Добавляет перехватчик (interceptor) для запросов. Это функция, которая будет вызываться перед отправкой каждого запроса. Идеально подходит для добавления токенов авторизации, логирования или модификации данных.

Параметры:

onFulfilled (function) — Функция, которая получает конфигурацию запроса и должна вернуть ее (возможно, измененную).
onRejected (function, необязательно) — Функция для обработки ошибки в перехватчике.

Пример:

// Добавляем перехватчик для добавления токена из localStorage
axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    console.log('Запрос отправляется:', config.url);
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

10. `axios.interceptors.response.use(onFulfilled, onRejected)`

Что делает: Добавляет перехватчик для ответов. Вызывается после получения ответа от сервера, но до того, как он будет передан в .then(). Полезен для глобальной обработки ошибок (например, 401 Unauthorized) или трансформации данных.

Параметры: Аналогичны перехватчику запросов.

Пример:

// Глобальная обработка ошибки 401 (перенаправление на страницу логина)
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response && error.response.status === 401) {
      console.log('Сессия истекла, перенаправляем...');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

Реальный практический пример: Простой REST-клиент для управления задачами

Давайте создадим небольшой модуль для работы с API управления задачами (Todo API). Мы используем axios.create для базовой конфигурации и реализуем CRUD-операции.

import axios from 'axios';

// Создаем экземпляр Axios с базов


                
    
  Также в библиотеке
  
                
                  
                 Работа с ZIP/архивами в C++: библиотека libzip и примеры кода
      
                
                  
                 MailKit для C# (.NET): полное руководство с примерами
      
                
                  
                 Стандартная библиотека Rust: полный обзор для разработчиков
      
                
                  
                 Отправка email на C++: libcurl и SMTP-клиенты
      
                
                  
                 Геолокация и карты в Node.js: библиотеки для работы с картами