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

HTTP-клиент для TypeScript: полный обзор топ библиотек

В современной веб-разработке на TypeScript взаимодействие с удалёнными API — базовая задача. Выбор правильного HTTP-клиента напрямую влияет на производительность, читаемость кода и удобство отладки. В этой статье мы рассмотрим пять лучших библиотек для выполнения HTTP-запросов в TypeScript, их особенности, примеры использования и рекомендации по выбору.

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

Axios остаётся самым популярным HTTP-клиентом в экосистеме TypeScript. Он предоставляет удобный API на основе промисов, автоматическую трансформацию JSON и встроенную поддержку перехватчиков (interceptors).

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

• Поддержка браузеров и Node.js (из коробки)
• Автоматический парсинг JSON-ответов
• Отмена запросов через CancelToken или AbortController
• Защита от XSRF
• Полная типизация для TypeScript

Пример использования с TypeScript:

import axios, { AxiosResponse } from 'axios';

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

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

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

Axios идеально подходит для крупных проектов, где требуется тонкая настройка запросов и обработка ошибок.

2. Fetch API — нативный подход

Современный Fetch API встроен во все браузеры и Node.js (с версии 18). Он лёгкий, не требует установки дополнительных пакетов, но требует ручной обработки ошибок и парсинга.

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

• Отсутствие зависимостей
• Поддержка стримов и Service Workers
• Нативная интеграция с TypeScript через generics

Пример с TypeScript:

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

async function getPost(id: number): Promise<Post> {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`
  );
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json() as Promise<Post>;
}

getPost(1).then(post => console.log(post.title));

Рекомендуется для небольших проектов или когда нужно минимизировать размер бандла.

3. Ky — минимализм и удобство

Ky — это лёгкая обёртка над Fetch API, созданная командой Sindre Sorhus. Она добавляет удобные функции: повторные попытки, таймауты, автоматический парсинг JSON и удобное управление ошибками.

Особенности:

• Размер всего ~2 KB (gzip)
• Автоматические повторные попытки при ошибках сети
• Поддержка AbortController
• Полная поддержка TypeScript

Пример кода:

import ky from 'ky';

interface Product {
  id: number;
  title: string;
  price: number;
}

async function getProduct(id: number): Promise<Product> {
  const product = await ky
    .get(`https://fakestoreapi.com/products/${id}`)
    .json<Product>();
  return product;
}

getProduct(1).then(product => console.log(product.title));

Ky отлично подходит для современных веб-приложений, где важна производительность и простота.

4. Got — мощный клиент для Node.js

Got — один из самых функциональных HTTP-клиентов для Node.js. Он поддерживает кэширование, потоки, прокси, повторные попытки и расширенную обработку ошибок. Полностью типизирован.

Ключевые возможности:

• Поддержка HTTP/2 и WebSocket
• Встроенное кэширование (совместимо с Redis)
• Расширенные хуки (beforeRequest, afterResponse)
• Поддержка стримов для больших файлов

Пример использования:

import got from 'got';

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

async function fetchTodos(): Promise<Todo[]> {
  const todos = await got
    .get('https://jsonplaceholder.typicode.com/todos')
    .json<Todo[]&