HTTP-Client in TypeScript: Anfragen richtig stellen

HTTP-Client in TypeScript: Anfragen richtig stellen

In der modernen Webentwicklung ist die Arbeit mit HTTP-Anfragen eine der zentralen Aufgaben. TypeScript, als streng typisierte Erweiterung von JavaScript, bietet Entwicklern leistungsstarke Werkzeuge zur Erstellung zuverlässiger und vorhersagbarer HTTP-Clients. In diesem Artikel werden wir untersuchen, wie man einen HTTP-Client in TypeScript richtig organisiert, damit Ihr Code sicher, lesbar und leicht wartbar ist.

Warum ist TypeScript ideal für HTTP-Clients?

TypeScript fügt statische Typisierung hinzu, was besonders bei der Arbeit mit externen APIs wichtig ist. Sie wissen genau, welche Daten vom Server kommen, und können viele Fehler bereits in der Kompilierungsphase vermeiden. Betrachten wir ein einfaches Beispiel:

// Schlecht: JavaScript ohne Typenconst data = await fetch('/api/users');const users = await data.json();// Wir kennen die Struktur von users nicht

// Gut: TypeScript mit Typeninterface User {  id: number;  name: string;  email: string;}

const response = await fetch('/api/users');const users: User[] = await response.json();// Jetzt hat users eine klare Struktur

Erstellung eines grundlegenden HTTP-Clients in TypeScript

Beginnen wir mit der Erstellung eines universellen HTTP-Clients, der alle Arten von Anfragen verarbeitet. Wir verwenden die native fetch API, die in modernen Browsern und Node.js 18+ verfügbar ist.

Basisimplementierung mit Typisierung

interface HttpClientConfig {  baseURL: string;  headers?: Record<string, string>;  timeout?: number;}

interface ApiResponse<T> {  data: T;  status: number;  ok: boolean;}

class HttpClient {  private baseURL: string;  private headers: Record<string, string>;  private timeout: number;

  constructor(config: HttpClientConfig) {    this.baseURL = config.baseURL;    this.headers = {      'Content-Type': 'application/json',      ...config.headers,    };    this.timeout = config.timeout || 10000;  }

  private async request<T>(    endpoint: string,    options: RequestInit = {}  ): Promise<ApiResponse<T>> {    const url = `${this.baseURL}${endpoint}`;    const controller = new AbortController();    const timeoutId = setTimeout(() => controller.abort(), this.timeout);

    try {      const response = await fetch(url, {        ...options,        headers: { ...this.headers, ...options.headers },        signal: controller.signal,      });

      clearTimeout(timeoutId);

      const data: T = await response.json();

      return {        data,        status: response.status,        ok: response.ok,      };    } catch (error) {      clearTimeout(timeoutId);      throw this.handleError(error);    }  }

  private handleError(error: unknown): Error {    if (error instanceof DOMException && error.name === 'AbortError') {      return new Error('Request timeout');    }    if (error instanceof TypeError) {      return new Error('Network error');    }    return error as Error;  }

  async get<T>(endpoint: string): Promise<ApiResponse<T>> {    return this.request<T>(endpoint, { method: 'GET' });  }

  async post<T>(endpoint: string, body: unknown): Promise<ApiResponse<T>> {    return this.request<T>(endpoint, {      method: 'POST',      body: JSON.stringify(body),    });  }

  async put<T>(endpoint: string, body: unknown): Promise<ApiResponse<T>> {    return this.request<T>(endpoint, {      method: 'PUT',      body: JSON.stringify(body),    });  }

  async delete<T>(endpoint: string): Promise<ApiResponse<T>> {    return this.request<T>(endpoint, { method: 'DELETE' });  }}

Verwendung des Clients

// Erstellen einer Client-Instanzconst api = new HttpClient({  baseURL: 'https://api.