HTTP client for TypeScript: top libraries for modern web applications

HTTP client for TypeScript: top libraries for modern web applications

TypeScript has firmly established itself as the primary language for frontend and server-side development on Node.js. One of the key tasks every developer faces is sending HTTP requests to APIs. Choosing the right HTTP client affects performance, code readability, and debugging convenience. In this article, we will review the top libraries for working with HTTP in TypeScript, their features, strengths, and provide practical code examples.

1. Axios — the universal standard

Axios remains the most popular HTTP client for both the browser and Node.js. Its main advantage is rich functionality out of the box: support for interceptors, automatic JSON transformation, request cancellation, and XSRF protection.

In TypeScript, Axios integrates almost perfectly. You can type responses using generics, making the code safe and predictable.

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;}

// UsagefetchUser(1).then(user => console.log(user.name));

Pros: huge community, numerous examples, upload progress support, built-in error handling.

Cons: bundle size (~14 KB gzipped) may be excessive for simple projects.

2. Fetch API — the native choice

The built-in browser Fetch API has become a full-fledged replacement for XMLHttpRequest in recent years. For TypeScript developers, this means no extra dependencies. However, native Fetch requires more manual work: no automatic error throwing for 4xx/5xx statuses, and a polyfill is needed for 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));

Pros: zero bundle size, full Streams API support, Promise-based architecture.

Cons: need to manually check response statuses, no default timeouts, difficulties with request cancellation (AbortController).

3. Got — a powerful tool for Node.js

The Got library is specifically designed for the server-side Node.js environment. It offers advanced features: HTTP/2 support, retry mechanisms, caching, cookie and proxy handling. Got provides excellent typing for TypeScript.

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));

Pros: rich API for complex scenarios, built-in error handling, stream support, excellent documentation.

Cons: does not work in the browser, relatively large size (~10 KB gzipped), overkill for simple GET requests.

4. Ky — lightweight and modern

Ky is a minimalist HTTP client built on top of the Fetch API. It solves the main problems of native Fetch: adds ta