Was Axios dir gegenüber Fetch immer noch bietet

Die Fetch API ist deutlich gereift. Sie ist in jeden modernen Browser eingebaut, seit Version 18 nativ in Node.js über Undici verfügbar und in der Lage, JSON, Request-Cancellation und Streaming zu verarbeiten. Für viele Frontend-API-Anfragen reicht sie tatsächlich aus.

Warum greifen Teams also immer noch zu Axios? Nicht aus Gewohnheit, sondern weil Axios weiterhin spezifische Developer-Experience-Probleme löst, die Fetch dir selbst überlässt. Hier zeigt sich diese Lücke konkret.

Axios vs. Fetch: Wo die wirklichen Unterschiede liegen

1. HTTP-Fehlerbehandlung, die standardmäßig funktioniert

Fetch lehnt nur bei Netzwerkfehlern ab. Eine 404- oder 500-Antwort wird erfolgreich aufgelöst – du musst jedes Mal selbst response.ok prüfen.

// Fetch — du musst manuell prüfen
const res = await fetch('/api/user');
if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
const data = await res.json();

// Axios — lehnt bei 4xx/5xx standardmäßig automatisch ab
const { data } = await axios.get('/api/user');

In großen Anwendungen mit Dutzenden von Endpoints wird diese manuelle Prüfung zu sich wiederholendem Boilerplate-Code. Axios eliminiert das Meiste davon standardmäßig.

2. Eingebaute Request- und Response-Interceptors

Dies ist das Feature, das die meisten Entwickler bei der Wahl von Axios nennen. Interceptors erlauben es dir, Logik – Auth-Tokens, Logging, Fehlernormalisierung – einmalig und global anzubinden, ohne einzelne Requests anzufassen.

axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${getToken()}`;
  return config;
});

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) redirectToLogin();
    return Promise.reject(error);
  }
);

Mit Fetch kannst du dies simulieren, indem du fetch() in eine eigene Funktion wrappst. Aber dieser Wrapper ist weder komponierbar noch stapelbar – und du musst ihn selbst pflegen.

3. Geteilte Konfiguration mit Axios-Instanzen

Mit Axios kannst du isolierte Instanzen mit voreingestellten Base-URLs, Headern und Timeouts erstellen – ein Muster, das wirklich nützlich ist, wenn deine App mit mehreren APIs kommuniziert.

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 8000,
  headers: { 'X-App-Version': '2.1.0' },
});

Dies sauber mit Fetch nachzubauen, erfordert eine Wrapper-Klasse oder Factory-Funktion. Machbar, aber zusätzlicher Aufwand, den du übernimmst.

4. Upload-Fortschrittsverfolgung

Fetch verfügt in Browsern immer noch über keine standardisierte native API zur Upload-Fortschrittsverfolgung. Axios stellt onUploadProgress direkt zur Verfügung, im Browser unter der Haube auf Basis von XMLHttpRequest.

await axios.post('/upload', formData, {
  onUploadProgress: e => {
    if (e.total) {
      console.log(`${Math.round((e.loaded / e.total) * 100)}%`);
    }
  },
});

Wenn du Upload-Fortschritt in einem reinen Fetch-Setup brauchst, landest du wieder bei rohem XMLHttpRequest. Das ist ein echter Rückschritt.

5. Timeout-Konfiguration ohne AbortController-Boilerplate

Axios akzeptiert eine timeout-Option direkt. Fetch verlangt, dass du AbortController und setTimeout manuell zusammenbaust – funktioniert zwar, erzeugt aber Rauschen.

// Axios
await axios.get('/api/data', { timeout: 5000 });

// Fetch-Äquivalent
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), 5000);
try {
  const res = await fetch('/api/data', { signal: controller.signal });
} finally {
  clearTimeout(id);
}

Moderne Umgebungen unterstützen außerdem AbortSignal.timeout(), was dies erheblich verkürzt, und die Browser-Unterstützung ist mittlerweile breit verfügbar.

Schneller Vergleich: Axios-Features vs. Fetch API

Fazit

Fetch ist nicht unzureichend. Für einfache JavaScript-HTTP-Clients – ein paar Endpoints, keine geteilte Auth-Logik, kein Upload-Fortschritt – ist es die richtige Standardwahl. Keine Abhängigkeit, kein Overhead.

Aber Axios verdient sich seinen Platz, wenn deine Frontend-API-Anfragen in der Komplexität wachsen. Interceptors, geteilte Instanzen, automatische Fehlerbehandlung und Upload-Fortschritt sind keine Features, die du vermissen wirst, bevor du sie brauchst – und dann willst du sie eingebaut haben, nicht selbst gestrickt. Genau das gibt dir Axios immer noch.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.