Frontend Academy · Lektion

Axios: Interceptors und Basis-URL

Erstellen Sie eine Axios-Instanz mit einer baseURL, fügen Sie Auth-Tokens in Request-Interceptoren hinzu und behandeln Sie 4xx-/5xx-Fehler in Response-Interceptoren.

Lektion 2 von 414 Schritte

Axios: Interceptors und Basis-URL ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Axios verwenden?

Axios ist ein beliebter HTTP-Client auf Basis von XMLHttpRequest. Es bietet zusätzlich: automatische JSON-Verarbeitung, Request-/Response-Interceptor, baseURL-Konfiguration, timeout und Request-Abbruch-Token. Viele Teams bevorzugen Axios weiterhin gegenüber fetch.

Axios installieren

Installieren Sie Axios über npm. Das Browser-Bundle ist ungefähr 14 KB groß (gzip-komprimiert).

npm install axios

Grundlegende GET- und POST-Anfragen

Axios wandelt JSON-Bodies automatisch in Zeichenketten um und parst JSON-Antworten automatisch – Sie benötigen keine manuellen Aufrufe von JSON.stringify oder .json().

import axios from 'axios';

const { data } = await axios.get('/api/users');
console.log(data); // already parsed

const res = await axios.post('/api/users', { name: 'Alice' });
console.log(res.data, res.status);

Eine Axios-Instanz erstellen

Erstellen Sie eine konfigurierte Instanz für Ihre API, damit Sie base URL, Header und timeout nicht bei jedem Aufruf wiederholen müssen.

import axios from 'axios';

export const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});

// Use it:
const { data } = await api.get('/users');
const res = await api.post('/users', { name: 'Alice' });

Request-Interceptor: Auth-Token

Fügen Sie das Auth-Token jeder Anfrage hinzu, ohne Code zu wiederholen.

api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

Response-Interceptor: Globale Fehler

Zentralisieren Sie die Fehlerbehandlung für alle Antworten: bei 401 weiterleiten, bei 5xx einen Toast anzeigen usw.

api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      window.location.href = '/login';
    }
    if (error.response?.status >= 500) {
      toast.error('Server error. Please try again.');
    }
    return Promise.reject(error);
  }
);

Token-Erneuerung bei 401

Verwenden Sie einen Response-Interceptor, um 401 zu erkennen, das Token zu erneuern und die ursprüngliche Anfrage transparent erneut auszuführen.

api.interceptors.response.use(null, async (error) => {
  const originalRequest = error.config;
  if (error.response?.status === 401 && !originalRequest._retry) {
    originalRequest._retry = true;
    const newToken = await refreshToken();
    localStorage.setItem('token', newToken);
    originalRequest.headers.Authorization = `Bearer ${newToken}`;
    return api(originalRequest); // retry
  }
  return Promise.reject(error);
});

URL-Parameter und Query

Axios akzeptiert ein params-Objekt und serialisiert es automatisch als Query-String.

const { data } = await api.get('/search', {
  params: { q: 'react hooks', page: 2 }
});
// GET /search?q=react+hooks&page=2

Timeouts

Setzen Sie ein Timeout für Anfragen, damit diese bei einem langsamen Server nicht hängen bleiben.

api.get('/slow-endpoint', { timeout: 5000 })
  .catch(err => {
    if (err.code === 'ECONNABORTED') {
      console.log('Request took too long');
    }
  });

Anfragen abbrechen

Verwenden Sie AbortController (modernes Axios) oder einen CancelToken (ältere API).

const controller = new AbortController();

api.get('/big-data', { signal: controller.signal })
  .catch(err => {
    if (axios.isCancel(err)) console.log('cancelled');
  });

controller.abort();

Struktur des Fehlerobjekts

Axios-Fehler enthalten error.response (der Server hat mit einem Fehlerstatus geantwortet), error.request (keine Antwort empfangen) oder weder noch (die Einrichtung der Anfrage ist fehlgeschlagen).

Axios vs. Fetch – wann welches wählen

Axios: übersichtlichere API, integrierte Interceptors und weniger Aufwand bei der Fehlerbehandlung. Fetch: nativ, kleineres Bundle und moderne Streaming-Unterstützung. Neue Projekte entscheiden sich häufig für fetch plus einen schlanken Wrapper; bestehende Axios-Projekte werden nur selten migriert.

Kurzer Wissenstest

Welche Funktion von Axios ermöglicht es Ihnen, jeder Anfrage einen Authorization-Header hinzuzufügen, ohne jeden einzelnen Aufruf zu ändern?

Beantworte es in der interaktiven Lektion

Zusammenfassung: Axios

axios.create() für konfigurierte Instanzen mit baseURL und timeout. JSON-Antworten werden automatisch geparst (res.data). Request-Interceptors fügen Tokens hinzu; Response-Interceptors behandeln Fehler und aktualisieren Tokens. Das params-Objekt dient für Query-Strings. AbortController dient zum Abbrechen. Wählen Sie Axios für eine übersichtliche API, fetch plus Wrapper für ein kleineres Bundle.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Axios: Interceptors und Basis-URL“ kostenlos?

Ja — der vollständige Text von „Axios: Interceptors und Basis-URL“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Axios: Interceptors und Basis-URL“?

Erstellen Sie eine Axios-Instanz mit einer baseURL, fügen Sie Auth-Tokens in Request-Interceptoren hinzu und behandeln Sie 4xx-/5xx-Fehler in Response-Interceptoren. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Axios: Interceptors und Basis-URL“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Frontend Academy