HTTP-Client für TypeScript: Top-Bibliotheken

HTTP-Client für TypeScript: vollständiger Überblick über die Top-Bibliotheken

In der modernen Webentwicklung mit TypeScript ist die Interaktion mit entfernten APIs eine grundlegende Aufgabe. Die Wahl des richtigen HTTP-Clients wirkt sich direkt auf die Leistung, die Lesbarkeit des Codes und den Debugging-Komfort aus. In diesem Artikel betrachten wir die fünf besten Bibliotheken für HTTP-Anfragen in TypeScript, ihre Besonderheiten, Anwendungsbeispiele und Empfehlungen zur Auswahl.

1. Axios — universeller Standard

Axios bleibt der beliebteste HTTP-Client im TypeScript-Ökosystem. Er bietet eine praktische Promise-basierte API, automatische JSON-Transformation und integrierte Unterstützung für Interceptors.

Wesentliche Merkmale:

Unterstützung für Browser und Node.js (out of the box)
Automatisches Parsen von JSON-Antworten
Anfragen abbrechen über CancelToken oder AbortController
Schutz vor XSRF
Vollständige Typisierung für TypeScript

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

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

Axios ist ideal für große Projekte, bei denen eine feine Abstimmung von Anfragen und Fehlerbehandlung erforderlich ist.

2. Fetch API — nativer Ansatz

Die moderne Fetch API ist in alle Browser und Node.js (ab Version 18) integriert. Sie ist leichtgewichtig, erfordert keine Installation zusätzlicher Pakete, benötigt jedoch manuelle Fehlerbehandlung und Parsing.

Vorteile:

Keine Abhängigkeiten
Unterstützung für Streams und Service Workers
Native Integration mit TypeScript über Generics

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

Empfohlen für kleine Projekte oder wenn die Bundle-Größe minimiert werden soll.

3. Ky — Minimalismus und Komfort

Ky ist ein leichter Wrapper um die Fetch API, entwickelt vom Team von Sindre Sorhus. Es fügt praktische Funktionen hinzu: Wiederholungsversuche, Timeouts, automatisches JSON-Parsing und komfortable Fehlerverwaltung.

Besonderheiten:

Größe nur ~2 KB (gzip)
Automatische Wiederholungsversuche bei Netzwerkfehlern
Unterstützung für AbortController
Vollständige TypeScript-Unterstützung

Codebeispiel:

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 eignet sich hervorragend für moderne Webanwendungen, bei denen Leistung und Einfachheit wichtig sind.

4. Got — leistungsstarker Client für Node.js

Got ist einer der funktionsreichsten HTTP-Clients für Node.js. Er unterstützt Caching, Streams, Proxys, Wiederholungsversuche und erweiterte Fehlerbehandlung. Voll