Axios: `transformResponse` korrekt verwenden

Die transformResponse-Option in Axios ist ein mächtiges Werkzeug, um rohe API-Antworten zu modifizieren, bevor sie an die .then()- oder .catch()-Blöcke weitergegeben werden. Eine falsche Anwendung kann jedoch dazu führen, dass response.data unerwartet undefined wird.

Diese Anleitung erklärt die korrekte Verwendung, häufige Fehlerquellen und bewährte Methoden.

Funktionsweise von transformResponse

transformResponse ist ein Array von Funktionen. Jede Funktion in diesem Array empfängt die Daten der vorherigen Funktion (oder die rohen Antwortdaten für die erste Funktion) und muss das Ergebnis der Transformation zurückgeben (return).

Wichtig: Wenn eine Transformationsfunktion keinen Wert zurückgibt, wird der Daten-Payload für die nächste Funktion (und letztendlich für response.data) zu undefined.

Minimalbeispiel

axios({
  method: "get",
  url: "/endpoint",
  transformResponse: [
    (data) => {
      // 'data' ist hier der rohe Response-String
      // Transformation durchführen und Ergebnis zurückgeben
      const parsedData = JSON.parse(data);
      // ... weitere Transformationen ...
      return parsedData;
    },
  ],
}).then((response) => {
  // response.data enthält nun das Ergebnis der Transformation
  console.log(response.data);
});

Fehlerquelle: response.data ist undefined

Dieses Problem tritt typischerweise aus folgenden Gründen auf:

1. Fehlendes return: Die Transformationsfunktion gibt keinen Wert zurück.
2. Überschriebene Standard-Transformer: Sie definieren transformResponse und überschreiben damit den Standard-JSON-Parser von Axios, ohne selbst zu parsen.
3. Fehler in der Transformation: Ein Fehler innerhalb der Funktion wird stillschweigend abgefangen.

Standard-Transformer von Axios

Standardmäßig enthält axios.defaults.transformResponse eine Funktion, die JSON-Strings automatisch in JavaScript-Objekte umwandelt, sofern der Content-Type-Header der Antwort application/json ist.

Wenn Sie eine eigene Transformation hinzufügen möchten, ohne die Standardfunktionalität zu verlieren, müssen Sie die Standard-Transformer explizit einbeziehen:

const defaultTransform = axios.defaults.transformResponse;

axios({
  url: "/endpoint",
  transformResponse: Array.isArray(defaultTransform)
    ? [
        ...defaultTransform,
        (data) => {
          // 'data' ist hier bereits ein JavaScript-Objekt (geparst vom Default-Transformer)
          data.customField = 'neuer Wert';
          return data;
        },
      ]
    : [
        (data) => {
          // Fallback, falls defaultTransform keine Liste ist
          data.customField = 'neuer Wert';
          return data;
        },
      ],
});

Praxisbeispiel: Sicheres Parsen und Transformieren

Das folgende Beispiel zeigt eine robuste Implementierung, die das JSON-Parsing innerhalb eines try...catch-Blocks durchführt, um Fehler abzufangen.

async function fetchMovieGenres() {
  const TMDB_API_TOKEN = "IHR_API_TOKEN";

  try {
    const response = await axios({
      url: "/genre/movie/list",
      method: "get",
      baseURL: "https://api.themoviedb.org/3",
      headers: {
        Authorization: `Bearer ${TMDB_API_TOKEN}`,
      },
      transformResponse: [
        (raw) => {
          // Stellt sicher, dass die rohe Antwort ein String ist, bevor geparst wird
          if (typeof raw !== 'string') {
            return raw;
          }
          try {
            const parsed = JSON.parse(raw);
            // Gibt entweder das 'data'-Feld oder das gesamte Objekt zurück
            return parsed.data ?? parsed;
          } catch (err) {
            console.error("Fehler beim Parsen von JSON:", err);
            // Gibt im Fehlerfall die rohen Daten zurück, anstatt undefined
            return raw;
          }
        },
      ],
    });

    return response.data;
  } catch (error) {
    console.error("Axios-Request fehlgeschlagen:", error);
    // Fehlerbehandlung für den gesamten Request
  }
}

Debugging-Tipps

• Typ prüfen: Geben Sie typeof data in Ihrer Transformationsfunktion aus, um zu sehen, ob Sie einen String oder bereits ein Objekt erhalten.
• Header kontrollieren: Überprüfen Sie den Content-Type-Header in der Netzwerkantwort des Browsers.
• response.data vs. response: Loggen Sie immer das gesamte response-Objekt, um Header und Status-Codes zu sehen, nicht nur response.data.

Weiterführende Links

• Axios Dokumentation: Request Config
• Stack Overflow: Axios transformResponse returning undefined