Axios: Was es ist, HTTP-Anfragen und Grundlagen der Arbeit mit API

Was ist Axios?

Axios ist eine JavaScript-Bibliothek für HTTP-Anfragen aus dem Browser und der Node.js-Umgebung. Sie basiert auf XMLHttpRequest im Browser und dem http-Modul in Node.js und bietet eine einheitliche API für beide Plattformen.

Der Hauptvorteil von Axios gegenüber nativen fetch ist die automatische JSON-Verarbeitung, Interceptor-Unterstützung und bequemere Fehlerbehandlung. Im Gegensatz zu fetch benötigt Axios keine zwei .then-Aufrufe, um den JSON-Antwortkörper zu erhalten, und wirft bei HTTP-Fehlern (4xx, 5xx) automatisch Ausnahmen.

Die Bibliothek unterstützt alle wichtigen HTTP-Methoden: GET, POST, PUT, DELETE, PATCH und HEAD. Sie kann sowohl in einfachen Projekten als auch in großen Unternehmensanwendungen mit hunderttausenden Anfragen täglich eingesetzt werden.

Hauptmerkmale von Axios

• Promise API — alle Operationen geben ein Promise zurück, was asynchronen Code vereinfacht
• TypeScript-Unterstützung — vollständige Typisierung für alle Methoden und Konfigurationen
• Interceptoren — Middleware zur Verarbeitung von Anfragen und Antworten
• Transformation — automatische Datentransformation bei Eingabe und Ausgabe

Axios-Architektur und Funktionsprinzip

Die Axios-Architektur basiert auf dem Konzept der Adapter. Die Bibliothek abstrahiert die Transportschicht: Sie verwendet XMLHttpRequest im Browser und das http- oder https-Modul in Node.js. Dies bietet eine einheitliche Schnittstelle unabhängig von der Laufzeitumgebung.

Jede Anfrage durchläuft eine Kette von Interceptoren, die die Anfragekonfiguration oder Antwort ändern können. Nach den Interceptoren wird die Anfrage an den Adapter übergeben, der den eigentlichen HTTP-Aufruf ausführt. Die Antwort durchläuft dann die Antwort-Interceptoren, bevor sie den Anwendungscode erreicht.

Lebenszyklus einer Axios-Anfrage

1. Konfigurationserstellung — Methode, URL, Header, Anfragekörper
2. Anfrage-Interceptor — Konfigurationsänderung, Token hinzufügen
3. HTTP-Aufruf — Ausführung über den Browser- oder Node.js-Adapter
4. Antwort-Interceptor — Antworttransformation, Fehlerbehandlung
5. Rückgabe des Ergebnisses — Promise wird mit Daten aufgelöst oder abgelehnt

Hauptfunktionen von Axios

Axios verfügt über viele integrierte Funktionen, die es zu einer praktischen Wahl für die Arbeit mit HTTP in mobilen und Webanwendungen machen. Sehen wir uns die wichtigsten an.

Automatische Datentransformation

Beim Senden einer Anfrage wandelt Axios ein JavaScript-Objekt automatisch mit JSON.stringify in einen JSON-String um. Beim Empfangen einer Antwort parst die Bibliothek JSON zurück in ein Objekt. Dies erspart dem Entwickler die manuelle Serialisierung und Deserialisierung von Daten.

CSRF-Schutz

In der Browserumgebung fügt Axios automatisch XSRF-TOKEN-Header aus Cookies hinzu und schützt die Anwendung vor Cross-Site-Request-Forgery. Dazu reicht es aus, den Server so zu konfigurieren, dass er das Token in einem Cookie namens XSRF-TOKEN sendet.

Timeouts und Anfrageabbruch

Die Bibliothek unterstützt das Setzen eines Timeouts über den Parameter timeout und den Abbruch von Anfragen über AbortController. Dies ist besonders wichtig in mobilen Anwendungen mit instabiler Verbindung, wo hängende Anfragen Akku und Daten verbrauchen.

Installation und Konfiguration von Axios

Die Installation von Axios erfolgt über jeden Paketmanager. Die Bibliothek ist in der npm-Registry verfügbar und kann sowohl in Node.js- als auch in Browser-Projekten verwendet werden. Für TypeScript sind die Typen im Hauptpaket enthalten — zusätzliche Abhängigkeiten sind nicht erforderlich.

Nach der Installation können Sie eine Instanz mit einer Basiskonfiguration erstellen: Basis-URL, Standard-Timeout, gemeinsame Header. Dies vermeidet die Wiederholung derselben Parameter in jeder Anfrage und ermöglicht die zentrale Verwaltung der HTTP-Client-Einstellungen.

# Installieren über npm
npm install axios

# Installieren über yarn
yarn add axios

# Installieren über pnpm
pnpm add axios

Erstellen einer Instanz mit Konfiguration

Es wird empfohlen, eine separate Axios-Instanz für jeden API-Dienst zu erstellen. Dies ermöglicht die Angabe einer Basis-URL, Standard-Header und eines Timeouts, die ohne Wiederholung auf alle Anfragen dieser Instanz angewendet werden.

import axios from 'axios';

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

Codebeispiele mit Axios

Die Anfragebeispiele zeigen die wichtigsten Verwendungsmuster von Axios. Alle Beispiele verwenden die async/await-Syntax, die asynchronen Code im Vergleich zu .then()-Ketten lesbarer macht.

GET-Anfrage mit Parametern

Zum Abrufen von Daten vom Server wird die Methode axios.get verwendet. Die Anfrageparameter werden über das params-Objekt übergeben, das automatisch in einen Query-String umgewandelt wird. Die Antwort enthält die Daten im Feld data, den Status in status und die Header in headers.

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

async function getUsers() {
  try {
    const response = await api.get<User[]>('/users', {
      params: { page: 1, limit: 10 }
    });
    return response.data;
  } catch (error) {
    console.error('Fehler beim Laden der Benutzer', error);
    throw error;
  }
}

POST-Anfrage mit Body

Zum Senden von Daten an den Server wird axios.post verwendet. Das zweite Argument ist ein Objekt mit Daten, das Axios automatisch zu JSON serialisiert. Der Content-Type wird standardmäßig auf application/json gesetzt.

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

async function createUser(data: CreateUserDto) {
  const response = await api.post<User>('/users', data);
  return response.data;
}

Interceptoren

Interceptoren sind Middleware-Funktionen, die für jede Anfrage oder Antwort ausgeführt werden. Sie ermöglichen das Hinzufügen von Authentifizierungstoken, das Protokollieren von Anfragen und die zentrale Fehlerbehandlung. Ein Anfrage-Interceptor fügt den Authorization-Header mit einem aus dem Speicher abgerufenen Token hinzu.

// Anfrage-Interceptor — fügt Authentifizierungstoken hinzu
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Antwort-Interceptor — behandelt 401-Fehler
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Fehlerbehandlung in Axios

Die Fehlerbehandlung in Axios basiert auf dem Ausnahmemechanismus. Im Gegensatz zu fetch fängt Axios HTTP-Fehler (4xx, 5xx) automatisch ab und leitet sie an den catch-Block weiter. Das Fehlerobjekt enthält Informationen über die Serverantwort, die Anfrage und den Ausführungskontext.

Es ist wichtig, drei Arten von Fehlern zu unterscheiden: Serverantwortfehler (response), Anfragefehler (request) und Konfigurationsfehler (config). Der erste tritt auf, wenn ein HTTP-Aufruf erfolgreich ausgeführt wird, aber einen Fehlercode zurückgibt, der zweite, wenn keine Antwort vom Server kommt, und der dritte, wenn die Anfragekonfiguration ungültig ist.

import axios, { AxiosError } from 'axios';

async function safeRequest() {
  try {
    return await api.get('/data');
  } catch (error) {
    if (error instanceof AxiosError) {
      if (error.response) {
        console.warn('Antwortfehler', error.response.status);
      } else if (error.request) {
        console.warn('Keine Antwort vom Server');
      } else {
        console.warn('Konfigurationsfehler');
      }
    }
  }
}

Vergleich von Axios mit Fetch API

Der Vergleich von Axios mit der nativen Fetch API hilft zu verstehen, wann jede Technologie angemessen ist. Fetch ist eine im Browser integrierte API, die keine Installation erfordert. Axios ist eine Drittanbieter-Bibliothek mit zusätzlichen Funktionen. Für einfache Anfragen ist fetch ausreichend; für komplexe Anwendungen mit Interceptoren und zentralisierter Fehlerbehandlung ist Axios bequemer.

Fetch behandelt HTTP-Fehler (4xx, 5xx) nicht als Ausnahmen — Sie müssen response.ok überprüfen. Fetch benötigt zwei .then()-Aufrufe, um JSON zu erhalten: response.json() gibt dann ein Promise mit Daten zurück. Axios erledigt dies automatisch. Fetch unterstützt ohne zusätzliche Polyfills keinen Datei-Upload-Fortschritt. Axios verfügt über integrierte onUploadProgress und onDownloadProgress.

In Node.js ist Fetch seit Version 18 als experimentelles Feature verfügbar, während Axios seit Node.js 10 stabil läuft. Für Projekte, die ältere Node.js-Versionen unterstützen, ist die Wahl eindeutig für Axios. Für moderne Browser-Projekte ohne komplexe Anfrageverarbeitung kann fetch ausreichend sein.