Axios in React Native verwenden

Axios ist eine beliebte HTTP-Bibliothek, die gegenüber der eingebauten fetch()-Funktion (siehe folgendes Kapitel) einige Komfortfunktionen mitbringt: automatische JSON-Umwandlung, Interceptors, bessere Fehlerobjekte und eine baseURL-Konfiguration.

1. Beschreibung

Axios funktioniert in React Native identisch wie im Browser oder in Node.js, da es intern auf XMLHttpRequest aufbaut, das React Natives JavaScript-Umgebung ebenfalls bereitstellt. Installation über npm install axios, danach direkt importierbar.

2. Kurzes Beispiel

import axios from 'axios';

const antwort = await axios.get('https://api.example.com/benutzer');
console.log(antwort.data); // bereits als JS-Objekt, kein .json() nötig

3. Komplettes Projekt: GitHub-Benutzersuche

npx create-expo-app axios-demo
cd axios-demo
npm install axios

api/githubClient.js

import axios from 'axios';

const githubClient = axios.create({
  baseURL: 'https://api.github.com',
  timeout: 8000,
});

githubClient.interceptors.response.use(
  (antwort) => antwort,
  (fehler) => {
    console.log('API-Fehler:', fehler.message);
    return Promise.reject(fehler);
  }
);

export default githubClient;

App.js

import { useState } from 'react';
import { View, TextInput, Button, Text, Image, ActivityIndicator, StyleSheet } from 'react-native';
import githubClient from './api/githubClient';

export default function App() {
  const [benutzername, setBenutzername] = useState('facebook');
  const [profil, setProfil] = useState(null);
  const [ladeVorgang, setLadeVorgang] = useState(false);
  const [fehlermeldung, setFehlermeldung] = useState(null);

  async function suchen() {
    setLadeVorgang(true);
    setFehlermeldung(null);
    try {
      const antwort = await githubClient.get(`/users/${benutzername}`);
      setProfil(antwort.data);
    } catch (fehler) {
      if (fehler.response?.status === 404) {
        setFehlermeldung('Benutzer nicht gefunden.');
      } else {
        setFehlermeldung('Netzwerkfehler, bitte erneut versuchen.');
      }
      setProfil(null);
    } finally {
      setLadeVorgang(false);
    }
  }

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={benutzername}
        onChangeText={setBenutzername}
        placeholder="GitHub-Benutzername"
        autoCapitalize="none"
      />
      <Button title="Suchen" onPress={suchen} />
      {ladeVorgang && <ActivityIndicator style={styles.spinner} />}
      {fehlermeldung && <Text style={styles.fehler}>{fehlermeldung}</Text>}
      {profil && (
        <View style={styles.profil}>
          <Image source={{ uri: profil.avatar_url }} style={styles.avatar} />
          <Text style={styles.name}>{profil.name ?? profil.login}</Text>
          <Text>{profil.public_repos} öffentliche Repos</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 60, paddingHorizontal: 24 },
  input: { borderWidth: 1, borderColor: '#d1d5db', borderRadius: 8, padding: 10, marginBottom: 10 },
  spinner: { marginTop: 20 },
  fehler: { color: '#dc2626', marginTop: 12 },
  profil: { alignItems: 'center', marginTop: 24 },
  avatar: { width: 96, height: 96, borderRadius: 48, marginBottom: 12 },
  name: { fontSize: 18, fontWeight: 'bold' },
});

4. Erklärung

axios.create({{ baseURL, timeout }}) erzeugt eine eigene Client-Instanz mit fest hinterlegter Basis-URL – jeder Aufruf muss danach nur noch den Pfad angeben (/users/facebook statt der vollen URL).
interceptors.response.use() fängt JEDE Antwort/JEDEN Fehler dieses Clients zentral ab – hier für einheitliches Fehler-Logging genutzt, in echten Apps oft auch für automatisches Token-Refresh.
fehler.response?.status – Axios unterscheidet zwischen einem echten HTTP-Fehlerstatus (Server hat geantwortet, aber z.B. 404) und einem Netzwerkfehler (keine Antwort erhalten) – response ist im zweiten Fall undefined, daher ?..
antwort.data ist bereits das geparste JSON-Objekt – anders als bei fetch() ist kein manuelles await antwort.json() nötig (siehe nächstes Kapitel für den direkten Vergleich).

5. Ausgaben

Ausgabe

Ein Eingabefeld (vorausgefüllt mit "facebook") und ein "Suchen"-Button. Nach Antippen erscheint kurz ein Ladekreis, dann ein rundes Profilbild, der Name ("Meta") und die Anzahl öffentlicher Repositories. Bei einem nicht existierenden Benutzernamen erscheint stattdessen roter Text "Benutzer nicht gefunden.".