Axios: HTTP-клиент для TypeScript

Что такое Axios?

Axios — это популярный HTTP-клиент для браузера и Node.js, написанный на TypeScript. Он предоставляет удобный и современный API для выполнения асинхронных HTTP-запросов. Библиотека автоматически обрабатывает JSON-данные, поддерживает перехватчики (interceptors), защиту от CSRF и отмену запросов.

Зачем нужен Axios?

В отличие от встроенного fetch, Axios предлагает более интуитивный синтаксис, автоматическую трансформацию данных и встроенную обработку ошибок. Он идеально подходит для создания REST API-клиентов, работы с аутентификацией и загрузки файлов. Благодаря поддержке TypeScript, вы получаете строгую типизацию всех запросов и ответов.

Установка

Для установки Axios в проект используйте npm или yarn:

npm install axios
# или
yarn add axios

Для работы с TypeScript установите типы (обычно они уже включены):

npm install @types/axios

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

Поддержка всех HTTP-методов: GET, POST, PUT, DELETE, PATCH и другие.
Автоматическая сериализация JSON: данные преобразуются автоматически.
Перехватчики (interceptors): можно обрабатывать запросы и ответы глобально (например, для добавления токенов).
Отмена запросов: используя CancelToken или AbortController.
Загрузка файлов: поддержка прогресса загрузки через onUploadProgress.
Защита от CSRF: автоматическая работа с куками и заголовками.
Типизация: полная поддержка TypeScript с дженериками.

Пример кода на TypeScript

Базовый GET-запрос с типизацией ответа:

import axios, { AxiosResponse } from 'axios';

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

async function getUser(id: number): Promise<User> {
  const response: AxiosResponse<User> = await axios.get(`/api/users/${id}`);
  return response.data;
}

// Использование
getUser(1).then(user => console.log(user.name));

Пример POST-запроса с отправкой данных:

import axios from 'axios';

interface CreateUserPayload {
  name: string;
  email: string;
}

const newUser: CreateUserPayload = { name: 'John', email: 'john@example.com' };

axios.post('/api/users', newUser)
  .then(response => console.log('User created:', response.data))
  .catch(error => console.error('Error:', error));

Пример с перехватчиком для добавления токена:

import axios from 'axios';

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});