Fetch API et Axios - Se connecter au serveur

Il est temps d'apprendre à communiquer avec des API externes - les serveurs de l'Atlantide !

Fetch API - La solution intégrée

import { useState, useEffect } from 'react';

interface Creature {
  id: string;
  name: string;
  species: string;
  habitat: string;
}

function CreatureList() {
  const [creatures, setCreatures] = useState<Creature[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchCreatures();
  }, []);

  const fetchCreatures = async () => {
    try {
      setIsLoading(true);
      const response = await fetch('https://api.atlantis.app/creatures');

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const data = await response.json();
      setCreatures(data);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Une erreur est survenue');
    } finally {
      setIsLoading(false);
    }
  };

  // Requête POST
  const createCreature = async (creature: Omit<Creature, 'id'>) => {
    try {
      const response = await fetch('https://api.atlantis.app/creatures', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer token123',
        },
        body: JSON.stringify(creature),
      });

      if (!response.ok) {
        throw new Error('Failed to create creature');
      }

      const newCreature = await response.json();
      setCreatures(prev => [...prev, newCreature]);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Erreur');
    }
  };

  if (isLoading) return <ActivityIndicator size="large" />;
  if (error) return <Text style={styles.error}>{error}</Text>;

  return (
    <FlatList
      data={creatures}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.card}>
          <Text style={styles.name}>{item.name}</Text>
          <Text>{item.species}</Text>
        </View>
      )}
    />
  );
}

Axios - Une bibliothèque riche en fonctionnalités

npx expo install axios

// api/client.ts
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

// Configuration de l'instance
const apiClient = axios.create({
  baseURL: 'https://api.atlantis.app',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Intercepteur - ajouter le token à chaque requête
apiClient.interceptors.request.use(
  async (config) => {
    const token = await AsyncStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Intercepteur - gestion des erreurs
apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401) {
      // Token expiré - déconnecter l'utilisateur
      await AsyncStorage.removeItem('authToken');
      // Rediriger vers la connexion
    }
    return Promise.reject(error);
  }
);

export default apiClient;

Service d'API

// api/creatureService.ts
import apiClient from './client';

export interface Creature {
  id: string;
  name: string;
  species: string;
  habitat: string;
}

export const creatureService = {
  getAll: async (): Promise<Creature[]> => {
    const response = await apiClient.get('/creatures');
    return response.data;
  },

  getById: async (id: string): Promise<Creature> => {
    const response = await apiClient.get(`/creatures/${id}`);
    return response.data;
  },

  create: async (creature: Omit<Creature, 'id'>): Promise<Creature> => {
    const response = await apiClient.post('/creatures', creature);
    return response.data;
  },

  update: async (id: string, updates: Partial<Creature>): Promise<Creature> => {
    const response = await apiClient.patch(`/creatures/${id}`, updates);
    return response.data;
  },

  delete: async (id: string): Promise<void> => {
    await apiClient.delete(`/creatures/${id}`);
  },

  search: async (query: string): Promise<Creature[]> => {
    const response = await apiClient.get('/creatures/search', {
      params: { q: query },
    });
    return response.data;
  },
};

Utilisation dans un composant

import { creatureService } from '@/api/creatureService';

function CreatureScreen() {
  const [creatures, setCreatures] = useState<Creature[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    loadCreatures();
  }, []);

  const loadCreatures = async () => {
    try {
      setIsLoading(true);
      const data = await creatureService.getAll();
      setCreatures(data);
    } catch (error) {
      if (axios.isAxiosError(error)) {
        console.error('Axios error:', error.response?.data);
      }
    } finally {
      setIsLoading(false);
    }
  };

  const handleCreate = async () => {
    try {
      const newCreature = await creatureService.create({
        name: 'Nouveau Triton',
        species: 'Triton',
        habitat: 'Les Profondeurs',
      });
      setCreatures(prev => [...prev, newCreature]);
    } catch (error) {
      console.error('Create error:', error);
    }
  };

  return (
    // ... JSX
  );
}

Axios offre plus de fonctionnalités que fetch : intercepteurs, transformations automatiques, annulation de requête et meilleure gestion des erreurs.

import axios from 'axios';

// Configuration de l'instance axios
const apiClient = axios.create({
  baseURL: 'https://api.atlantis.app',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Récupération simulée du token (normalement depuis AsyncStorage)
async function getAuthToken(): Promise<string | null> {
  return 'token-atlantis-123';
}

// TODO : ajoute un intercepteur de requête qui :
//   - récupère le token via getAuthToken()
//   - si le token existe, définit config.headers.Authorization = `Bearer ${token}`
//   - retourne config
apiClient.interceptors.request.use(
  async (config) => {
    const token = await getAuthToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// TODO : ajoute un intercepteur de réponse qui, en cas de statut 401,
//   affiche un avertissement concernant l'expiration du token
apiClient.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401) {
      console.warn('Token expired - log out the user');
    }
    return Promise.reject(error);
  }
);

export default apiClient;