Intégration des API dans une Application React Native : fetch vs axios

L’intégration d’API est une étape incontournable dans le développement d’applications mobiles modernes. Que ce soit pour récupérer des données, envoyer des formulaires ou interagir avec des services tiers, il est essentiel de bien comprendre comment effectuer des appels réseau.

Dans cet article, nous allons voir comment intégrer des API dans une application React Native en utilisant deux solutions populaires : fetch, l’API native de JavaScript, et axios, une bibliothèque externe plus flexible.

📦 Pré-requis

Avant de commencer, assurez-vous que vous avez :

• Une application React Native fonctionnelle (créée avec npx react-native init ou Expo).
• Un éditeur de code comme VS Code.
• Un backend/API avec lequel interagir (ex: https://jsonplaceholder.typicode.com/ pour les tests).

📌 1. Utiliser fetch

fetch est une API native de JavaScript utilisée pour effectuer des requêtes réseau.

🔄 Exemple : Récupérer une liste d’articles

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';

const ArticleList = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setArticles(data))
      .catch(error => console.error('Erreur lors de la récupération:', error));
  }, []);

  return (
    <View>
      <Text>Liste des articles :</Text>
      <FlatList
        data={articles}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

export default ArticleList;

✅ Avantages de fetch

• Nativement intégré à React Native.
• Léger, aucune installation nécessaire.

❌ Inconvénients

• Pas de gestion automatique des erreurs HTTP (il faut vérifier manuellement les codes d’état).
• Syntaxe parfois verbeuse.

🛠️ 2. Utiliser axios

axios est une bibliothèque populaire pour effectuer des appels HTTP. Elle est plus puissante que fetch et offre une API plus simple.

📦 Installation

npm install axios

ou

yarn add axios

🔄 Exemple : Récupérer une liste d’articles avec axios

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';
import axios from 'axios';

const ArticleList = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => setArticles(response.data))
      .catch(error => console.error('Erreur Axios:', error));
  }, []);

  return (
    <View>
      <Text>Liste des articles (Axios) :</Text>
      <FlatList
        data={articles}
        keyExtractor={item => item.id.toString()}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

export default ArticleList;

✅ Avantages d’axios

• Gestion automatique des erreurs HTTP.
• Support des requêtes POST, PUT, PATCH, DELETE avec des objets simples.
• Possibilité de créer des instances avec des configurations globales (baseURL, headers, etc.).

❌ Inconvénients

• Nécessite une installation externe.
• Légèrement plus lourd que fetch.

🧪 Exemple d’envoi de données (POST) avec axios

const envoyerDonnees = async () => {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'Mon nouvel article',
      body: 'Contenu de l’article',
      userId: 1
    });
    console.log('Réponse du serveur :', response.data);
  } catch (error) {
    console.error('Erreur lors de l’envoi :', error);
  }
};

🧠 Bonnes pratiques

1. Créer une instance Axios avec baseURL si vous utilisez une API centralisée :

// api.js
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
});

export default api;

2. Utiliser async/await pour un code plus lisible que les promesses enchaînées.
3. Gérer les erreurs proprement pour afficher des messages clairs à l’utilisateur.
4. Afficher un loader pendant les requêtes pour améliorer l’UX.

⚖️ fetch ou axios : que choisir ?

➡️ Conseil : Pour des projets simples, fetch peut suffire. Pour des projets complexes ou professionnels, axios est généralement recommandé.

L’intégration d’API dans React Native est essentielle pour interagir avec un backend ou des services externes. Que vous utilisiez fetch ou axios, l’important est de structurer proprement vos appels et de bien gérer les erreurs.

🔧 Besoin de structurer vos appels API de manière centralisée ? Pensez à créer un dossier services/ avec des fonctions dédiées à chaque ressource !