Fehlerbehandlung mit Axios in TypeScript -

Die Bibliothek Axios ist eine beliebte HTTP-Client-Bibliothek, die für die Durchführung von HTTP-Anfragen verwendet wird. In TypeScript können Sie von Typisierung profitieren, um Anfragen und Fehlerbehandlung effektiver zu gestalten.

Beispiele für die Fehlerbehandlung mit Axios

1. Grundlegende Fehlerbehandlung

import axios, { AxiosError } from 'axios';

async function fetchData(url: string): Promise<void> {
  try {
    const response = await axios.get(url);
    console.log('Daten erfolgreich abgerufen:', response.data);
  } catch (error) {
    if (axios.isAxiosError(error)) {
      console.error('Axios-Fehler:', error.message);
      console.error('Statuscode:', error.response?.status);
    } else {
      console.error('Ein unbekannter Fehler ist aufgetreten:', error);
    }
  }
}

fetchData('https://api.example.com/data');

axios.isAxiosError prüft, ob der Fehler von Axios stammt.
Der Statuscode und die Antwortdaten können über error.response überprüft werden.

2. Error Interceptors für globale Fehlerbehandlung

Mit Axios-Interceptors können Sie Fehler global abfangen, z. B. für zentrale Logging-Mechanismen oder automatische Wiederholungslogik.

import axios from 'axios';

// Interceptor für Fehler
axios.interceptors.response.use(
  response => response,
  error => {
    if (axios.isAxiosError(error)) {
      console.error('Ein HTTP-Fehler ist aufgetreten:', error.response?.status, error.message);
    } else {
      console.error('Ein unbekannter Fehler ist aufgetreten:', error);
    }
    return Promise.reject(error); // Fehler weitergeben
  }
);

async function fetchData(url: string): Promise<void> {
  try {
    const response = await axios.get(url);
    console.log('Daten:', response.data);
  } catch (error) {
    console.error('Fehler bei der Datenabfrage:', error);
  }
}

fetchData('https://api.example.com/data');

3. Typisierung der Antwortdaten

In TypeScript können Sie die Struktur der Antwortdaten typisieren, um den Code sicherer zu machen.

import axios from 'axios';

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

async function fetchUserData(url: string): Promise<ApiResponse | null> {
  try {
    const response = await axios.get<ApiResponse>(url);
    return response.data;
  } catch (error) {
    console.error('Fehler beim Abrufen der Nutzerdaten:', error);
    return null;
  }
}

fetchUserData('https://api.example.com/user/1').then(user => {
  if (user) {
    console.log(`Benutzername: ${user.name}`);
  }
});

Die generische Typisierung axios.get<ApiResponse> gibt an, dass die Antwort das Format von ApiResponse hat.

4. Retry-Logik bei Fehlern

Wenn Sie einen Fehler aufgrund eines temporären Problems (z. B. Netzwerkfehler) behandeln möchten, können Sie eine Wiederholungslogik implementieren.

import axios from 'axios';

async function fetchDataWithRetry(url: string, retries: number): Promise<void> {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await axios.get(url);
      console.log('Daten erfolgreich abgerufen:', response.data);
      return;
    } catch (error) {
      console.error(`Versuch ${i + 1} fehlgeschlagen:`, error.message);
      if (i === retries - 1) {
        console.error('Alle Versuche sind fehlgeschlagen.');
        throw error;
      }
    }
  }
}

fetchDataWithRetry('https://api.example.com/data', 3);

5. Fehler basierend auf Statuscodes behandeln

Sie können bestimmte Statuscodes gezielt behandeln, um benutzerdefinierte Fehlerbehandlungen vorzunehmen.

import axios from 'axios';

async function fetchData(url: string): Promise<void> {
  try {
    const response = await axios.get(url);
    console.log('Daten:', response.data);
  } catch (error) {
    if (axios.isAxiosError(error)) {
      switch (error.response?.status) {
        case 404:
          console.error('Ressource nicht gefunden (404).');
          break;
        case 500:
          console.error('Serverfehler (500).');
          break;
        default:
          console.error('Ein anderer Fehler:', error.message);
      }
    }
  }
}

fetchData('https://api.example.com/nonexistent');

Vorteile der Fehlerbehandlung in TypeScript mit Axios

Starke Typisierung: Verhindert viele Laufzeitfehler.
Erweiterbarkeit: Interceptors ermöglichen zentrale Fehlerbehandlung.
Flexibilität: Fehler basierend auf Statuscodes oder anderen Kriterien behandeln.