HTTP-Client in TypeScript: Anfragen richtig stellen: von A bis Z

HTTP-Client in TypeScript: Anfragen richtig stellen

TypeScript ist eine streng typisierte Erweiterung von JavaScript, die der Webentwicklung Zuverlässigkeit und Lesbarkeit des Codes verleiht. Bei der Arbeit mit externen APIs oder dem Backend wird die Fähigkeit, HTTP-Anfragen korrekt auszuführen, zu einer Schlüsselkompetenz. In diesem Artikel werden wir untersuchen, wie man einen vollwertigen HTTP-Client in TypeScript erstellt, angefangen bei den grundlegenden Prinzipien bis hin zu fortgeschrittenen Mustern der Fehlerbehandlung und Typisierung.

Warum ist TypeScript ideal für HTTP-Clients?

JavaScript bietet mehrere Möglichkeiten zur Durchführung von HTTP-Anfragen: den integrierten fetch, die Bibliotheken axios und node-fetch. TypeScript ermöglicht es jedoch, die Arbeit mit ihnen durch statische Typisierung auf eine neue Ebene zu heben. Sie können die Struktur von Anfrage und Antwort im Voraus beschreiben, was viele Fehler bereits zur Kompilierzeit ausschließt. Stellen Sie sich vor, Sie arbeiten mit einer API, die eine Liste von Benutzern zurückgibt. Ohne Typen riskieren Sie, auf ein nicht vorhandenes Feld zuzugreifen, und der Fehler tritt erst zur Laufzeit auf. TypeScript löst dieses Problem.

Hauptteil: Erstellen eines HTTP-Clients von Grund auf

1. Basis-GET-Anfrage mit fetch und Typisierung

Beginnen wir mit dem Einfachsten – einer GET-Anfrage. In TypeScript können wir ein Interface für die Antwort definieren und es an die generische Funktion fetch übergeben. Hier ist ein Beispiel:

interface User {  id: number;  name: string;  email: string;}

async function getUser(id: number): Promise<User> {  const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);    if (!response.ok) {    throw new Error(`HTTP error! status: ${response.status}`);  }    const data: User = await response.json();  return data;}

// VerwendunggetUser(1)  .then(user => console.log(user.name))  .catch(error => console.error('Fehler:', error.message));

Hier geben wir explizit an, dass die Funktion Promise<User> zurückgibt. Wenn sich die API ändert, wird der TypeScript-Compiler Sie auf Typenkonflikte hinweisen. Beachten Sie die Überprüfung von response.ok – dies ist ein obligatorischer Schritt zur Behandlung von HTTP-Fehlern (404, 500 usw.).

2. POST-Anfrage mit Body und Headern

Das Senden von Daten an den Server erfordert die Konfiguration von Headern und die Serialisierung des Anfrage-Bodys. Erstellen wir eine Funktion zum Anlegen eines neuen Benutzers:

interface CreateUserRequest {  name: string;  email: string;}

interface CreateUserResponse {  id: number;  name: string;  email: string;}

async function createUser(userData: CreateUserRequest): Promise<CreateUserResponse> {  const response = await fetch('https://jsonplaceholder.typicode.com/users', {    method: 'POST',    headers: {      'Content-Type': 'application/json',    },    body: JSON.stringify(userData),  });

  if (!response.ok) {    const errorBody = await response.text();    throw new Error(`Fehler beim Erstellen: ${response.status} - ${errorBody}`);  }

  return await response.json();}

// Beispielaufrufconst newUser: CreateUserRequest = { name: 'Ivan', email: 'ivan@example.com' };createUser(newUser).then(result => console.log('Erstellte ID:', result.id));

Die Typisierung von CreateUserRequest und CreateUserResponse macht den Code selbstdokumentierend. Andere Entwickler sehen sofort, welche Felder für das Senden erforderlich sind und was in der Antwort zu erwarten ist.

3. Universeller HTTP-Client mit Fehlerbehandlung

In realen Projekten kommt man selten mit einer einzigen Funktion aus. Besser ist es, eine universelle Klasse oder eine Reihe von Funktionen zu erstellen, die die Anforderungslogik zentralisieren. Hier ist ein Beispiel für einen fortgeschrittenen Client:

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';

interface RequestConfig {  method: HttpMethod;  endpoint: string;  body?: unknown;  params?: Record<string, string>;}

class HttpClient {  private baseUrl: string;\