HTTP-клиент для TypeScript: топ библиотек для современных веб-приложений

Онлайн-тренажер Python для начинающих

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

Начать курс

HTTP-клиент для TypeScript: топ библиотек для современных веб-приложений

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

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

Axios остается самым популярным HTTP-клиентом как для браузера, так и для Node.js. Его главное преимущество — богатая функциональность "из коробки": поддержка перехватчиков (interceptors), автоматическое преобразование JSON, отмена запросов и защита от XSRF.

В TypeScript Axios интегрируется практически идеально. Вы можете типизировать ответы, используя дженерики, что делает код безопасным и предсказуемым.

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>(`/api/users/${id}`);
  return response.data;
}

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

Плюсы: огромное сообщество, множество примеров, поддержка прогресса загрузки, встроенная обработка ошибок.

Минусы: размер бандла (~14 KB gzipped) может быть избыточным для простых проектов.

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

Встроенный в браузеры Fetch API в последние годы стал полноценной заменой XMLHttpRequest. Для TypeScript-разработчиков это означает отсутствие лишних зависимостей. Однако нативный Fetch требует больше ручной работы: нет автоматического выброса ошибок при статусах 4xx/5xx, а для Node.js нужен полифилл.

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

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

getPosts().then(posts => console.log(posts[0].title));

Плюсы: нулевой размер бандла, полная поддержка Streams API, Promise-based архитектура.

Минусы: необходимость вручную проверять статусы ответа, отсутствие таймаутов по умолчанию, сложности с отменой запросов (AbortController).

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

Библиотека Got создана специально для серверной среды Node.js. Она предлагает продвинутые возможности: поддержку HTTP/2, retry-механизмы, кэширование, работу с cookie и прокси. Для TypeScript Got предоставляет отличную типизацию.

import got from 'got';

interface ApiResponse {
  status: string;
  data: {
    id: number;
    value: string;
  };
}

async function fetchData(): Promise<ApiResponse> {
  const response = await got.get('https://api.example.com/data', {
    responseType: 'json',
    retry: { limit: 3 },
    timeout: { request: 5000 }
  }).json<ApiResponse>();
  return response;
}

fetchData().then(result => console.log(result.data.value));

Плюсы: богатый API для сложных сценариев, встроенная обработка ошибок, поддержка стримов, отличная документация.

Минусы: не работает в браузере, относительно большой размер (~10 KB gzipped), избыточен для простых GET-запросов.

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

Ky — это минималистичный HTTP-клиент, построенный поверх Fetch API. Он решает основные проблемы нативного Fetch: добавляет таймауты, ретраи, автоматическую обработку ошибок и удобный API для работы с JSON. Размер Ky составляет всего около 2 KB gzipped.

import ky from 'ky';

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

async function getProduct(id: string): Promise<Product> {
  const product = await ky.get(`/api/products/${id}`, {
    timeout: 3000,
    retry: 2
  }).json<Product>();
  return product;
}

getProduct('abc-123').then(product => console.log(product.price));

Плюсы: минимальный размер, TypeScript-first, отличная производительность, работает в браузере и Deno.

Минусы: меньше возможностей, чем у Axios (нет перехватчиков в стандартной поставке), сообщество меньше.

Рекомендаций