11.11 Améliorer le Code avec une Instance Axios React

Instance Axios React est un outil incontournable pour les développeurs travaillant avec React, leur permettant d’optimiser les requêtes HTTP. Mettre en place une instance Axios personnalisée améliore significativement la gestion des appels API, rendant votre code non seulement plus efficace mais aussi plus maintenable. Dans cet article, nous verrons comment créer et utiliser une instance Axios dans un projet React, illustré par des exemples pratiques.

Introduction à l’Utilisation d’une Instance Axios avec React

L’utilisation d’une instance Axios permet de centraliser la configuration des requêtes HTTP, comme l’URL de base, les en-têtes, et les interceptions. Cela rend le code plus cohérent et modifiable si des changements globaux sont nécessaires. Pour plus de détails sur l’intégration d’Axios avec React, vous pouvez consulter notre guide complet sur qu’est-ce que React – Introduction et avantages.

Créer une Instance Axios Personnalisée

Pour commencer, vous devez installer Axios si ce n’est pas déjà fait. Ensuite, créez une instance Axios avec une configuration personnalisée pour vos projets. Voici comment configurer une instance de base :

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
  }
});

export default apiClient;

Configurer des Intercepteurs pour les Requêtes et Réponses

Les intercepteurs ajoutent de la logique avant qu’une requête ne soit envoyée ou après qu’une réponse soit reçue. Cela est utile pour l’authentification et la gestion des erreurs. Pour mieux comprendre comment les intercepteurs fonctionnent, consultez notre section sur les différences entre les pages uniques et multiples dans React.

apiClient.interceptors.request.use(
  config => {
    const token = localStorage.getItem('authToken');
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  }, 
  error => Promise.reject(error)
);

apiClient.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      window.location = '/login';
    }
    return Promise.reject(error);
  }
);

Utiliser l’Instance Axios dans un Composant React

Avec votre instance Axios configurée, vous pouvez effectuer des appels API dans vos composants React. Voici comment les utiliser dans un useEffect pour récupérer des données lors du montage d’un composant :

import React, { useEffect, useState } from 'react';
import apiClient from './apiClient';

function DataFetchingComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    apiClient.get('/data')
      .then(response => setData(response.data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    

      
Données
      

        {data.map(item => (
          
{item.name}
        ))}
      
    
  );
}

export default DataFetchingComponent;

Gestion des Erreurs avec Axios et React

Une interface robuste nécessite une gestion adéquate des erreurs. Vous pouvez afficher des messages d’erreur ou rediriger les utilisateurs en cas de problèmes. Pour un exemple pratique, explorez notre guide sur maîtriser les objets JavaScript en développement React.

function ErrorHandlingComponent() {
  const [error, setError] = useState(null);

  useEffect(() => {
    apiClient.get('/data')
      .then(response => console.log('Data fetched:', response.data))
      .catch(error => {
        setError('Une erreur est survenue lors de la récupération des données.');
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    

      {error ? 
{error}
 : 
Données chargées avec succès.
}
    
  );
}

Conclusion

Utiliser une instance Axios React dans votre projet permet un contrôle précis et maintient un code propre et optimisé. Cela permet de centraliser la gestion des configurations de requêtes et des intercepteurs, offrant une expérience utilisateur fluide et sécurisée. Pour explorer d’autres aspects de React et Axios, regardez nos ressources sur l’utilisation des formulaires dans React et les exercices pour s’améliorer avec React.

Afin de parfaire votre maîtrise de React, consultez également notre guide sur l’utilisation des modules CSS avec React pour mieux gérer votre CSS.