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

Что такое Axios?

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

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

В отличие от встроенного fetch, Axios автоматически парсит JSON, обрабатывает ошибки HTTP-статусов (например, 404 или 500) как исключения, поддерживает отмену запросов и прогресс-бары загрузки. Для TypeScript-проектов Axios предоставляет строгую типизацию ответов и запросов, что упрощает разработку и уменьшает количество багов. Если вы пишете на TypeScript и работаете с API, Axios — стандартный выбор.

Установка

npm install axios

Для проектов на TypeScript типы уже включены в пакет, дополнительно устанавливать @types/axios не требуется.

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

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

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

import axios, { AxiosResponse } from 'axios';

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

async function fetchUser(id: number): Promise<User> {
  try {
    const response: AxiosResponse<User> = await axios.get<User>(`https://api.example.com/users/${id}`);
    return response.data;
  } catch (error) {
    if (axios.isAxiosError(error)) {
      console.error('Axios error:', error.message);
    } else {
      console.error('Unexpected error:', error);
    }
    throw error;
  }
}

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

Когда использовать Axios

Axios идеально подходит для любых проектов на TypeScript, где требуется взаимодействие с HTTP-серверами: от простых SPA до сложных серверных приложений на Node.js. Особенно полезен, когда нужна продвинутая обработка ошибок, автоматическая сериализация данных или работа с несколькими API. Если вы используете React, Vue или Angular, Axios легко интегрируется с ними благодаря поддержке перехватчиков и отмены запросов.

Библиотека активно поддерживается, имеет огромное сообщество и используется в тысячах проектов. Axios — это зрелое и стабильное решение, которое не требует дополнительных зависимостей.