HTTP-клиент для TypeScript: топ библиотек

HTTP-клиент для TypeScript: топ библиотек для работы с сетью

В современной веб-разработке на TypeScript выбор правильного HTTP-клиента критически важен для производительности, типобезопасности и удобства поддержки кода. Рассмотрим лучшие библиотеки для выполнения HTTP-запросов, их особенности и примеры использования.

1. Axios — универсальный стандарт

Axios остаётся самым популярным HTTP-клиентом благодаря богатому API и встроенной поддержке TypeScript. Библиотека предоставляет удобные методы для GET, POST, PUT, DELETE запросов, автоматическую трансформацию JSON и отмену запросов.

import axios from 'axios';

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

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

// Пример с отправкой данных
const newUser: Partial<User> = { name: 'Иван', email: 'ivan@example.com' };
axios.post('/api/users', newUser).then(({ data }) => console.log(data));

Преимущества:

Глубокая интеграция с TypeScript (дженерики для ответов)
Интерцепторы для логирования и обработки ошибок
Встроенная защита от XSS и автоматическая сериализация
Поддержка прогресса загрузки файлов

2. Ky — лёгкий и современный

Ky — минималистичная библиотека (всего ~5KB), построенная поверх Fetch API. Идеально подходит для проектов, где важна скорость загрузки и простота. Полностью типизирована на TypeScript.

import ky from 'ky';

interface Post {
  userId: number;
  id: number;
  title: string;
}

const posts = await ky.get('https://jsonplaceholder.typicode.com/posts').json<Post[]>();

// Отправка с кастомными заголовками
const response = await ky.post('https://api.example.com/data', {
  json: { key: 'value' },
  headers: { 'X-API-Key': 'secret' },
});

Ключевые особенности:

Автоматическая обработка ошибок HTTP (статусы 4xx/5xx)
Встроенная поддержка retry (повторные попытки при сбоях)
Лёгкая кастомизация через расширение класса
Работает в браузере и Node.js (через адаптеры)

3. Got — мощный инструмент для Node.js

Got — это полнофункциональный HTTP-клиент для серверной части на TypeScript. Поддерживает стримы, кэширование, прокси и сложные сценарии аутентификации.

import got from 'got';

interface ApiResponse {
  success: boolean;
  data: Record<string, unknown>;
}

const result = await got.get('https://api.example.com/resource', {
  responseType: 'json',
  headers: {
    authorization: `Bearer ${process.env.TOKEN}`
  }
}).json<ApiResponse>();

// Загрузка файла с прогрессом
got.stream('https://example.com/file.zip')
  .on('downloadProgress', ({ percent }) => {
    console.log(`Загружено ${(percent * 100).toFixed(0)}%`);
  })
  .pipe(fs.createWriteStream('./file.zip'));

Когда выбирать Got:

Для серверных приложений с высокой нагрузкой
При необходимости работы с потоками данных
Для сложных сценариев кэширования и повторных попыток
Интеграция с TypeScript через декораторы

4. Fetch API — нативный выбор

Современный Fetch API — встроенный в браузеры и Node.js (с 18 версии). TypeScript добавляет типизацию через дженерики, делая его полноценным инструментом.

interface Config {
  baseURL: string;
  token?: string;
}

async function fetchData<T>(endpoint: string, config: Config): Promise<T> {
  const response = await fetch(`${config.baseURL}${endpoint}`, {
    headers: {
      'Content-Type': 'application/json',
      ...(config.token && { Authorization: `Bearer ${config.token}` })
    }
  });
  
  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
  return response.json() as Promise<T>;
}

// Использование
const user = await fetchData<User>('/users/1', { baseURL: 'https://api.example.com' });

Преимущества нативного подхода: