HTTP-Client für TypeScript: Top-Bibliotheken für die Webentwicklung

HTTP-Client für TypeScript: Top-Bibliotheken für die Netzwerkarbeit

In der modernen Webentwicklung mit TypeScript ist die Wahl des richtigen HTTP-Clients entscheidend für Leistung, Typsicherheit und Wartbarkeit des Codes. Wir betrachten die besten Bibliotheken für HTTP-Anfragen, ihre Besonderheiten und Anwendungsbeispiele.

1. Axios — universeller Standard

Axios bleibt der beliebteste HTTP-Client dank seiner umfangreichen API und der integrierten TypeScript-Unterstützung. Die Bibliothek bietet praktische Methoden für GET-, POST-, PUT-, DELETE-Anfragen, automatische JSON-Transformation und das Abbrechen von Anfragen.

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

// Beispiel mit Datensendungconst newUser: Partial<User> = { name: 'Ivan', email: 'ivan@example.com' };axios.post('/api/users', newUser).then(({ data }) => console.log(data));

Vorteile:

• Tiefe Integration mit TypeScript (Generics für Antworten)
• Interceptor für Logging und Fehlerbehandlung
• Integrierter XSS-Schutz und automatische Serialisierung
• Unterstützung für Datei-Upload-Fortschritt

2. Ky — leicht und modern

Ky ist eine minimalistische Bibliothek (nur ~5KB), die auf der Fetch API aufbaut. Ideal für Projekte, bei denen Ladegeschwindigkeit und Einfachheit wichtig sind. Vollständig in TypeScript typisiert.

import ky from 'ky';

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

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

// Senden mit benutzerdefinierten Headernconst response = await ky.post('https://api.example.com/data', {  json: { key: 'value' },  headers: { 'X-API-Key': 'secret' },});

Wesentliche Merkmale:

• Automatische Fehlerbehandlung bei HTTP (Status 4xx/5xx)
• Integrierte Retry-Unterstützung (Wiederholungsversuche bei Fehlern)
• Einfache Anpassung durch Klassenerweiterung
• Funktioniert im Browser und in Node.js (über Adapter)

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

Got ist ein voll funktionsfähiger HTTP-Client für serverseitige TypeScript-Anwendungen. Unterstützt Streams, Caching, Proxys und komplexe Authentifizierungsszenarien.

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

// Datei-Download mit Fortschrittgot.stream('https://example.com/file.zip')  .on('downloadProgress', ({ percent }) => {    console.log(`Geladen ${(percent * 100).toFixed(0)}%`);  })  .pipe(fs.createWriteStream('./file.zip'));

Wann Got wählen:

• Für Serveranwendungen mit hoher Last
• Bei Bedarf an Datenstromverarbeitung
• Für komplexe Caching- und Wiederholungsszenarien
• Integration mit TypeScript über Decorators

4. Fetch API — native Wahl

Die moderne Fetch API ist in Browser und Node.js (ab Version 18) integriert. TypeScript fügt Typisierung durch Generics hinzu und macht sie zu einem vollwertigen Werkzeug.

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}` })