Auswahl des richtigen HTTP-Clients in JavaScript – node-fetch, Axios und Ky

Die unverzichtbare Rolle von HTTP-Clients im modernen JavaScript

In der weiten Landschaft der modernen Webentwicklung interagieren JavaScript-Anwendungen, egal ob im Browser oder auf einem Server mit Node.js, ständig mit externen Ressourcen. Vom Abrufen von Daten aus RESTful APIs bis zum Hochladen von Dateien in Cloud-Speicher ist eine zuverlässige und effiziente HTTP-Kommunikation das Rückgrat der meisten dynamischen Anwendungen. Angesichts der Vielzahl verfügbarer Tools kann die Wahl des richtigen HTTP-Clients jedoch eine nuancierte Entscheidung sein, die die Entwicklungsgeschwindigkeit, die Anwendungsleistung und die Wartbarkeit beeinflusst. Dieser Artikel befasst sich mit drei prominenten JavaScript-HTTP-Clients – node-fetch, Axios und Ky – und bietet einen detaillierten Vergleich, der Ihnen helfen soll, eine fundierte Wahl zu treffen und sie effektiv in Ihren Projekten einzusetzen.

Die Kernakteure verstehen

Bevor wir uns auf einen direkten Vergleich einlassen, wollen wir ein grundlegendes Verständnis dafür schaffen, was HTTP-Clients sind und welche Schlüsselkonzepte ihrer Funktionsweise zugrunde liegen.

Was ist ein HTTP-Client?

Ein HTTP-Client ist eine Software-Entität, die HTTP-Anfragen an einen Server sendet und HTTP-Antworten empfängt. In JavaScript bedeutet dies typischerweise eine Bibliothek oder eine integrierte API, die es Ihnen ermöglicht, Netzwerkanfragen programmatisch zu initiieren, Antworten zu verarbeiten, Header festzulegen und Fehler zu verwalten.

Schlüsselkonzepte bei HTTP-Anfragen

Promises: Moderne JavaScript-HTTP-Clients verlassen sich stark auf Promises zur Verarbeitung asynchroner Operationen. Ein Promise repräsentiert die endgültige Fertigstellung (oder den Fehler) einer asynchronen Operation und ihren daraus resultierenden Wert.
Anfragemethoden (Verben): HTTP definiert mehrere Anfragemethoden, die üblicherweise als Verben bezeichnet werden und die gewünschte Aktion für eine bestimmte Ressource angeben. Die gebräuchlichsten sind GET (abrufen), POST (erstellen), PUT (aktualisieren/ersetzen), PATCH (teilweise aktualisieren) und DELETE (löschen).
Header: HTTP-Header stellen Metainformationen über die Anfrage oder Antwort bereit. Gängige Header sind Content-Type (gibt den Medientyp der Ressource an), Authorization (Anmeldeinformationen für die Authentifizierung) und Accept (gibt die Medientypen an, die der Client zu akzeptieren bereit ist).
Anfrage-Body: Für Methoden wie POST, PUT und PATCH werden Daten im Anfrage-Body gesendet. Dies beinhaltet typischerweise JSON oder Formulardaten.
Antwortverarbeitung: Nach dem Empfang einer Antwort vom Server stellen HTTP-Clients Methoden zur Verfügung, um auf den Antwortstatus, die Header und den Body (oft als JSON oder Text geparst) zuzugreifen.
Interceptors: Einige HTTP-Clients bieten Interceptors, bei denen es sich um Funktionen handelt, die registriert werden können, um aufgerufen zu werden, bevor eine Anfrage gesendet oder nachdem eine Antwort empfangen wurde. Sie sind äußerst nützlich für Aufgaben wie das Hinzufügen von Authentifizierungstoken, das Protokollieren von Anfragen oder die globale Fehlerbehandlung.

Nun wollen wir die einzelnen Fähigkeiten und Eigenschaften von node-fetch, Axios und Ky untersuchen.

Node-fetch: Überbrückung der Lücke in Node.js

Was ist node-fetch?

node-fetch ist ein leichtgewichtiges Modul, das die window.fetch-API des Browsers in Node.js bringt. Es zielt darauf ab, so nah wie möglich am Standard-Browser-fetch zu sein, was es zu einer natürlichen Wahl für Entwickler macht, die eine konsistente API sowohl für client-seitiges als auch für serverseitiges JavaScript wünschen. Da es die native fetch-API spiegelt, erfordert es für Browser-Entwickler, die zu Node.js wechseln, oft nur geringen kognitiven Aufwand.

Kernprinzipien und Verwendung

node-fetch nutzt die Promise-basierte API von fetch. Eine einfache GET-Anfrage sieht wie folgt aus:

import fetch from 'node-fetch'; // Für ES Modules
// const fetch = require('node-fetch'); // Für CommonJS

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log('Fetched data:', data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchData();

Senden einer POST-Anfrage mit einem JSON-Body:

import fetch from 'node-fetch';

async function postData() {
  try {
    const response = await fetch('https://api.example.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-token'
      },
      body: JSON.stringify({ title: 'My New Post', content: 'Hello World' })
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const result = await response.json();
    console.log('Post created:', result);
  } catch (error) {
    console.error('Post error:', error);
  }
}

postData();

Schlüsselmerkmale:

Leichtgewichtig: node-fetch ist minimalistisch konzipiert und konzentriert sich ausschließlich auf die Nachbildung von fetch.
Vertraute API: Fast identisch mit der fetch-API des Browsers, was ein erheblicher Vorteil für die Konsistenz ist.
Keine eingebaute Interceptors: Im Gegensatz zu Axios verfügt node-fetch (und native fetch) nicht über einen integrierten Interceptor-Mechanismus. Sie würden typischerweise Request-/Response-Middleware manuell implementieren oder die fetch-Funktion wrappen.
Einschränkung bei der Fehlerbehandlung: fetch löst keinen Fehler für HTTP-Statuscodes im Bereich 4xx oder 5xx aus. Sie müssen response.ok oder response.status explizit überprüfen, um festzustellen, ob die Anfrage erfolgreich war.
Body-Verarbeitung: Sie müssen response.json(), response.text() usw. explizit aufrufen, um den Antwort-Body zu parsen.

node-fetch ist ideal, wenn Sie Wert auf eine geringe Bündelgröße und native Browser-API-Konsistenz legen und sich mit manueller Fehlerprüfung und Implementierung von Middleware wohlfühlen.

Axios: Der funktionsreiche Anwärter

Was ist Axios?

Axios ist ein beliebter, Promise-basierter HTTP-Client für den Browser und Node.js. Es ist bekannt für seine robusten Funktionen, einschließlich automatischer JSON-Verarbeitung, Request-/Response-Interceptors, Abbruchfunktion und starker Typdefinitionen (TypeScript). Axios bietet eine stärker meinungsbasierte und entwicklerfreundlichere Erfahrung im Vergleich zu fetch.

Kernprinzipien und Verwendung

Axios vereinfacht viele gängige Aufgaben wie JSON-Verarbeitung und Fehlerbehandlung.

import axios from 'axios';

async function fetchDataAxios() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('Fetched data:', response.data); // Axios parst JSON automatisch
  } catch (error) {
    if (error.response) {
      // Die Anfrage wurde gesendet und der Server hat mit einem Statuscode geantwortet,
      // der außerhalb des Bereichs von 2xx liegt
      console.error('API Error:', error.response.status, error.response.data);
    } else if (error.request) {
      // Die Anfrage wurde gesendet, aber keine Antwort empfangen
      console.error('Network Error:', error.request);
    } else {
      // Beim Einrichten der Anfrage ist etwas passiert, das einen Fehler ausgelöst hat
      console.error('Request Setup Error:', error.message);
    }
  }
}

fetchDataAxios();

Senden einer POST-Anfrage mit JSON-Body:

import axios from 'axios';

async function postDataAxios() {
  try {
    const response = await axios.post('https://api.example.com/posts', {
      title: 'My New Post (Axios)',
      content: 'Hello World from Axios'
    }, {
      headers: {
        'Authorization': 'Bearer your-token'
      }
    });
    console.log('Post created:', response.data);
  } catch (error) {
    console.error('Post error:', error.message);
  }
}

postDataAxios();

Schlüsselmerkmale:

Automatische JSON-Transformation: Axios transformiert automatisch Antwortdaten basierend auf dem Content-Type-Header (z. B. JSON in ein JavaScript-Objekt). Es stringifiziert auch standardmäßig JavaScript-Objekte zu JSON für POST-Anfragen.

Interceptors: Ein herausragendes Merkmal. Sie können Anfrage-Interceptors hinzufügen (z. B. um zu jeder Anfrage einen Authorization-Header hinzuzufügen) und Antwort-Interceptors (z. B. um globale Fehlermeldungen zu behandeln oder ablaufende Token zu aktualisieren).

axios.interceptors.request.use(config => {
  // Fügt jeder Anfrage ein Token hinzu
  const token = localStorage.getItem('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

axios.interceptors.response.use(response => response, error => {
  if (error.response && error.response.status === 401) {
    console.error('Authentifizierung fehlgeschlagen. Weiterleitung zur Anmeldung...');
    // history.push('/login'); // Beispiel für eine React-App
  }
  return Promise.reject(error);
});

Integrierter XSRF-Schutz: Axios bietet clientseitigen XSRF-Schutz.
Abbruchfunktion: Einfaches Abbrechen von Anfragen mit CancelToken oder einem neueren AbortController (kompatibel mit der API von fetch).
Bessere Fehlerbehandlung: Axios löst für 4xx- und 5xx-HTTP-Statuscodes Fehler aus, was die Fehlerprüfung vereinfacht. Das Fehlerobjekt bietet nützliche Eigenschaften wie error.response für Serverantworten.
Globale Konfiguration: Definieren Sie globale Axios-Instanzen mit Standardkonfigurationen.

Axios ist eine ausgezeichnete Wahl für komplexe Anwendungen, die erweiterte Funktionen wie Interceptors, Abbruchfunktion und eine optimierte Fehlerbehandlung erfordern.

Ky: Ein schöner und schlanker `fetch`-Wrapper

Was ist Ky?

Ky ist ein winziger und eleganter HTTP-Client, der auf der nativen window.fetch-API aufbaut. Er wurde von Sindre Sorhus entwickelt und zielt darauf ab, eine ergonomischere und funktionsreichere fetch-Erfahrung zu bieten, ohne die Bündelgröße drastisch zu erhöhen oder die grundlegende fetch-API zu verändern. Ky konzentriert sich auf die Entwicklererfahrung und bietet sinnvolle Standardeinstellungen, automatische Verarbeitung und robuste Fehlerbehandlung rund um fetch.

Kernprinzipien und Verwendung

Ky verfolgt die Philosophie kleiner, komponierbarer Utility-Funktionen und erweitert fetch um Funktionen, die üblicherweise von einem HTTP-Client erwartet werden.

import ky from 'ky';

async function fetchDataKy() {
  try {
    // Ky parst JSON-Antworten automatisch und wirft Fehler für 4xx/5xx
    const data = await ky.get('https://api.example.com/data').json();
    console.log('Fetched data:', data);
  } catch (error) {
    if (error.response) {
      const errorData = await error.response.json(); // Zugriff auf den rohen fetch-Response
      console.error('API Error:', error.response.status, errorData);
    } else {
      console.error('Fetch error:', error.message);
    }
  }
}

fetchDataKy();

Senden einer POST-Anfrage mit JSON-Body:

import ky from 'ky';

async function postDataKy() {
  try {
    const result = await ky.post('https://api.example.com/posts', {
      json: { title: 'My New Post (Ky)', content: 'Hello World from Ky' },
      headers: {
        'Authorization': 'Bearer your-token'
      }
    }).json();
    console.log('Post created:', result);
  } catch (error) {
    console.error('Post error:', error.message);
  }
}

postDataKy();

Schlüsselmerkmale:

Auf fetch aufbauend: Ky ist ein dünner Wrapper um fetch, der dessen Kernprinzipien und API-Struktur beibehält, wodurch er hochgradig kompatibel, aber leistungsfähiger ist.
Automatische JSON-Verarbeitung und Content-Type-Header: Setzt automatisch Content-Type: application/json für die json-Option und parst Antworten standardmäßig als JSON.
Verbesserte Fehlerbehandlung: Löst HTTPError für 4xx- und 5xx-Antworten aus, die das ursprüngliche Response-Objekt zur Inspektion enthält.
Wiederholungsversuche: Eingebaute Wiederholungslogik mit exponentiellem Backoff für Netzwerkfehler.
Timeouts: Einfache API für Anfrage-Timeouts.

Hooks (ähnlich Interceptors): Bietet ein umfassendes „Hooks“-System zur Erweiterung des Verhaltens vor/nach Anfragen und zur Fehlerbehandlung.

const api = ky.create({
  prefixUrl: 'https://api.example.com',
  hooks: {
    beforeRequest: [
      request => {
        const token = localStorage.getItem('authToken');
        if (token) {
          request.headers.set('Authorization', `Bearer ${token}`);
        }
      }
    ],
    afterResponse: [
      async (request, options, response) => {
        if (response.status === 401) {
          // Token-Aktualisierung oder Abmeldung behandeln
          console.error('Nicht autorisiert, Versuch der Token-Aktualisierung...');
        }
        return response; // Muss die Antwort zurückgeben
      }
    ],
    beforeError: [
      async error => {
        if (error.response && error.response.status === 500) {
          console.error('Serverfehler aufgetreten:', await error.response.json());
        }
        return error; // Muss den Fehler zurückgeben
      }
    ]
  }
});

async function getUserKy() {
  try {
    const user = await api.get('users/1').json();
    console.log('User:', user);
  } catch (error) {
    console.error('Fetch user error:', error.message);
  }
}

getUserKy();

Abbrechbare Anfragen: Unterstützt AbortController zum Abbrechen von Anfragen.
TypeScript-Unterstützung: Mit TypeScript entwickelt, bietet hervorragende Typinferenz.
Kleine Bündelgröße: Trotz seiner Funktionen bleibt Ky bemerkenswert leichtgewichtig.

Ky ist eine ausgezeichnete Wahl für Projekte, bei denen Sie die Vertrautheit und Modernität von fetch wünschen, aber eine ausgefeiltere Entwicklererfahrung, robuste Fehlerbehandlung und gängige Funktionen wie Wiederholungsversuche und Hooks benötigen, ohne den größeren Fußabdruck von Axios.

Best Practices für HTTP-Clients

Unabhängig davon, welchen Client Sie wählen, die Einhaltung von Best Practices macht Ihre API-Interaktionen robuster und wartbarer.

API-Aufrufe zentralisieren oder eine Client-Instanz erstellen: Anstatt fetch- oder axios-Aufrufe in Ihrem Code zu verteilen, zentralisieren Sie diese in dedizierten API-Service-Dateien oder erstellen Sie eine vorkonfigurierte Client-Instanz.

// apiService.js mit Axios
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// Anfrage-Interceptor für Authentifizierung hinzufügen
apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export const getUsers = () => apiClient.get('/users');
export const createUser = (data) => apiClient.post('/users', data);

// In einer Komponente:
// import { getUsers } from './apiService';
// const users = await getUsers();

Robuste Fehlerbehandlung: Wickeln Sie Ihre API-Aufrufe immer in try...catch-Blöcke ein oder verwenden Sie .then().catch()-Ketten. Geben Sie dem Benutzer aussagekräftige Fehlermeldungen und protokollieren Sie detaillierte Fehler zur Fehlerbehebung. Nutzen Sie die spezifischen Fehlerstrukturen, die von Ihrem gewählten Client bereitgestellt werden (z. B. error.response in Axios/Ky, response.status in fetch).
Netzwerkausfälle und Timeouts behandeln: Implementieren Sie eine Logik, um Situationen, in denen der Server nicht erreichbar ist oder die Anfrage zu lange dauert, elegant zu behandeln. Axios und Ky bieten integrierte Timeout- und Wiederholungsmechanismen, während node-fetch eine manuelle Implementierung oder externe Bibliotheken erfordert.

AbortController für Abbruchfunktion verwenden: Insbesondere in Single-Page-Anwendungen (SPAs) sollten laufende Anfragen abgebrochen werden, wenn eine Komponente demontiert wird oder ein Benutzer weg navigiert, um Speicherlecks und veraltete Antworten zu vermeiden. Alle drei Clients können AbortController nutzen.

// Beispiel mit fetch/node-fetch
const controller = new AbortController();
const signal = controller.signal;

try {
  const response = await fetch('https://api.example.com/long-request', { signal });
  // ...
} catch (error) {
  if (error.name === 'AbortError') {
    console.log('Anfrage wurde abgebrochen');
  } else {
    console.error('Fetch error:', error);
  }
}

// Zum Abbrechen:
// controller.abort();

Authentifizierung sichern: Geben Sie niemals vertrauliche Anmeldeinformationen direkt im clientseitigen Code preis. Verwenden Sie sichere Methoden wie OAuth, JWTs und speichern Sie Token sicher (z. B. HTTP-Only-Cookies für serverseitig, oder localStorage/sessionStorage mit sorgfältiger Berücksichtigung für clientseitige SPAs). Implementieren Sie bei Bedarf eine Refresh-Token-Logik.
Umgebungsvariablen: Verwenden Sie für verschiedene API-Endpunkte (Entwicklung, Staging, Produktion) Umgebungsvariablen zur Konfiguration Ihres baseURL, anstatt sie fest zu codieren.
Server-Side Rendering (SSR) / Static Site Generation (SSG) berücksichtigen: Wenn Sie ein Framework wie Next.js oder Nuxt.js verwenden, denken Sie daran, dass fetch oder Ihr gewählter Client während der Build-/Render-Prozesse auf dem Server ausgeführt wird. Dies kann node-fetch-Kompatibilität erfordern, auch wenn Sie primär den Browser anvisieren.