Comment utiliser les intercepteurs Axios pour gérer les réponses d'erreur de l'API

Lors de la création d'applications Web modernes, la gestion des appels d'API et de leurs réponses est une partie essentielle du développement. Axios, une bibliothèque JavaScript populaire, simplifie la création de requêtes HTTP, mais elle est également dotée de fonctionnalités intégrées telles que les intercepteurs qui permettent aux développeurs de gérer les réponses et les erreurs de manière plus simple et plus efficace.

Dans cet article, nous nous concentrerons sur l'utilisation des intercepteurs Axios pour gérer efficacement les réponses aux erreurs de l'API, vous permettant ainsi de standardiser la gestion des erreurs dans l'ensemble de votre application.

Qu’est-ce qu’Axios ?

Axios est un client HTTP basé sur des promesses pour JavaScript qui prend en charge la syntaxe async/await pour envoyer des requêtes aux API. Il est populaire car il est simple à utiliser et ses capacités peuvent être facilement étendues avec des intercepteurs.

Exemple de bases d'Axios :

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Bien que cet exemple montre comment gérer les requêtes et les erreurs avec .then et .catch, l'utilisation d'intercepteurs peut rendre votre code plus efficace lorsque vous devez gérer plusieurs requêtes API.

Que sont les intercepteurs Axios ?

Les

Axios intercepteurs sont des fonctions qui vous permettent d'intercepter et de gérer à la fois les requêtes et les réponses avant qu'elles ne soient traitées par .then ou .catch. Ceci est particulièrement utile lorsque vous devez appliquer des configurations communes à toutes les requêtes ou gérer les réponses aux erreurs de manière uniforme.

Il existe deux principaux types d'intercepteurs :

1. Intercepteur de requêtes : utilisé pour modifier ou ajouter des en-têtes, des jetons ou d'autres configurations aux requêtes avant leur envoi.
2. Intercepteur de réponse : utilisé pour gérer les réponses ou les erreurs de manière globale, y compris la journalisation ou la nouvelle tentative des demandes si nécessaire.

Pourquoi utiliser des intercepteurs de réponse ?

Lorsque vous traitez plusieurs points de terminaison d'API, chacun peut renvoyer différents types de messages d'erreur ou de codes d'état. Sans intercepteurs, vous devrez gérer les erreurs pour chaque appel d'API individuel, ce qui peut conduire à un code répétitif et impossible à maintenir.

Avec un intercepteur de réponses, vous pouvez gérer toutes les réponses aux erreurs en un seul endroit, garantissant ainsi une approche cohérente de la gestion des erreurs dans votre application.

Configuration d'un intercepteur de réponse Axios

1. Installez Axios

Tout d'abord, assurez-vous qu'Axios est installé dans votre projet :

npm install axios

2. Créez une instance Axios

Pour configurer des intercepteurs, il est préférable de créer une instance Axios qui pourra être réutilisée dans toute votre application. Cela permet de standardiser le traitement de vos demandes et de vos réponses.

import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

3. Ajouter un intercepteur de réponse

Vous pouvez ajouter un intercepteur de réponse pour détecter et gérer les erreurs avant qu'elles n'atteignent vos blocs .then ou .catch dans vos appels d'API individuels.

npm install axios

4. Effectuer des appels API

Avec l'intercepteur en place, vous pouvez désormais utiliser apiClient pour vos appels API. Si une erreur se produit, elle sera automatiquement détectée et traitée par l'intercepteur.

import axios from 'axios';

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

Dans cette configuration, vous n'avez pas besoin d'écrire du code de gestion des erreurs pour chaque appel d'API. L'intercepteur centralise cette logique et rend vos appels API plus propres et plus faciles à maintenir.

---

Cas d'utilisation pratiques des intercepteurs Axios

1. Actualisation automatique des jetons

Si votre API utilise des jetons d'authentification (par exemple, JWT), vous pouvez rencontrer une situation dans laquelle le jeton expire et vous devez l'actualiser. Les intercepteurs Axios peuvent être utilisés pour actualiser automatiquement le jeton lorsqu'une réponse 401 non autorisée est reçue.

apiClient.interceptors.response.use(
  (response) => {
    // If the response is successful (status code 2xx), return the response data
    return response;
  },
  (error) => {
    // Handle errors globally
    if (error.response) {
      // Server responded with a status code out of 2xx range
      const statusCode = error.response.status;
      const errorMessage = error.response.data.message || 'An error occurred';

      // Handle different status codes accordingly
      if (statusCode === 401) {
        // Handle unauthorized error, for example by redirecting to login
        console.error('Unauthorized access - redirecting to login');
      } else if (statusCode === 500) {
        // Handle server errors
        console.error('Server error - try again later');
      } else {
        // Handle other types of errors
        console.error(`Error ${statusCode}: ${errorMessage}`);
      }
    } else if (error.request) {
      // No response received (network error, timeout, etc.)
      console.error('Network error - check your internet connection');
    } else {
      // Something else happened during the request
      console.error('Request error:', error.message);
    }

    // Optionally, return a rejected promise to ensure `.catch` is triggered in individual requests
    return Promise.reject(error);
  }
);

2. Gestion des erreurs réseau

Si votre application repose sur des API externes, les problèmes de réseau peuvent être un problème courant. Les intercepteurs Axios peuvent aider à fournir des messages d'erreur conviviaux en cas de panne de réseau.

// Example API call
apiClient.get('/users')
  .then(response => {
    console.log('User data:', response.data);
  })
  .catch(error => {
    // This will be triggered if the error isn't handled by the interceptor
    console.error('Error fetching users:', error);
  });

---

Avantages de l'utilisation des intercepteurs Axios

1. Gestion centralisée des erreurs : au lieu d'écrire du code de gestion des erreurs pour chaque appel d'API, vous pouvez gérer les erreurs en un seul endroit.

2. Code plus propre : Puisque la gestion des erreurs est prise en charge par l'intercepteur, vos appels API individuels seront plus propres et plus concis.

3. Maintenabilité améliorée : les modifications apportées à la gestion des erreurs (par exemple, l'ajout de nouveaux cas ou l'affinement des messages d'erreur) peuvent être effectuées en un seul endroit, ce qui rend la base de code plus facile à maintenir.

4. Cohérence : les intercepteurs garantissent une approche cohérente de la gestion des erreurs, de sorte que vous n'avez pas à vous soucier des cas extrêmes manquants ou de l'écriture de code redondant.

---

Conclusion

L'utilisation des intercepteurs Axios pour gérer les réponses d'erreur de l'API peut considérablement améliorer la structure, la maintenabilité et la cohérence de votre code. En centralisant la logique de gestion des erreurs, vous pouvez rendre vos appels d'API plus efficaces et réduire le code répétitif dans votre application.

Les intercepteurs sont une fonctionnalité puissante d'Axios qui peut être utilisée pour un large éventail de cas d'utilisation, de la gestion des actualisations de jetons à l'affichage de messages d'erreur conviviaux lors de pannes de réseau. Commencez dès aujourd'hui à tirer parti des intercepteurs Axios pour simplifier la gestion des erreurs et améliorer la résilience de votre application !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!