HTTP-Client für TypeScript: Top-Bibliotheken für moderne Webanwendungen

HTTP-Client für TypeScript: Top-Bibliotheken für moderne Webanwendungen

TypeScript hat sich fest als Hauptsprache für die Frontend-Entwicklung und serverseitige Anwendungen mit Node.js etabliert. Eine der zentralen Aufgaben, vor denen jeder Entwickler steht, ist das Senden von HTTP-Anfragen an APIs. Die Wahl des richtigen HTTP-Clients beeinflusst die Leistung, die Lesbarkeit des Codes und den Komfort beim Debuggen. In diesem Artikel analysieren wir die Top-Bibliotheken für die Arbeit mit HTTP in TypeScript, ihre Besonderheiten, Stärken und geben praktische Codebeispiele.

1. Axios — der universelle Standard

Axios bleibt der beliebteste HTTP-Client sowohl für den Browser als auch für Node.js. Sein Hauptvorteil ist der große Funktionsumfang "out of the box": Unterstützung von Interceptors, automatische JSON-Konvertierung, Anfrage-Abbruch und XSRF-Schutz.

In TypeScript lässt sich Axios nahezu perfekt integrieren. Sie können Antworten mithilfe von Generics typisieren, was den Code sicher und vorhersagbar macht.

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

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

Vorteile: riesige Community, zahlreiche Beispiele, Unterstützung des Upload-Fortschritts, integrierte Fehlerbehandlung.

Nachteile: Die Bundle-Größe (~14 KB gzipped) kann für einfache Projekte überdimensioniert sein.

2. Fetch API — die native Wahl

Die in Browser integrierte Fetch API hat sich in den letzten Jahren zu einem vollwertigen Ersatz für XMLHttpRequest entwickelt. Für TypeScript-Entwickler bedeutet dies keine zusätzlichen Abhängigkeiten. Allerdings erfordert natives Fetch mehr manuelle Arbeit: Es gibt kein automatisches Auslösen von Fehlern bei Statuscodes 4xx/5xx, und für Node.js wird ein Polyfill benötigt.

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

Vorteile: Null Bundle-Größe, volle Unterstützung der Streams API, Promise-basierte Architektur.

Nachteile: Manuelle Überprüfung der Antwortstatus erforderlich, keine Timeouts standardmäßig, Komplexität beim Abbrechen von Anfragen (AbortController).

3. Got — leistungsstarkes Werkzeug für Node.js

Die Bibliothek Got wurde speziell für die serverseitige Node.js-Umgebung entwickelt. Sie bietet erweiterte Funktionen: Unterstützung von HTTP/2, Retry-Mechanismen, Caching, Arbeit mit Cookies und Proxys. Für TypeScript bietet Got eine hervorragende Typisierung.

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

Vorteile: Umfangreiches API für komplexe Szenarien, integrierte Fehlerbehandlung, Unterstützung von Streams, hervorragende Dokumentation.

Nachteile: Funktioniert nicht im Browser, relativ große Größe (~10 KB gzipped), für einfache GET-Anfragen überdimensioniert.

4. Ky — leichtgewichtig und modern

Ky ist ein minimalistischer HTTP-Client, der auf der Fetch API aufbaut. Er löst die Hauptprobleme des nativen Fetch: fügt Timeouts hinzu