Comment implémenter les intercepteurs de requêtes Axios dans Next.js

Axios est une bibliothèque JavaScript largement utilisée qui facilite l'envoi de requêtes HTTP aux serveurs. L'une de ses fonctionnalités les plus remarquables est l'intercepteur, qui permet à notre application de détecter les demandes et les réponses. Les intercepteurs Axios nous permettent de configurer des fonctions qui s'exécutent pour chaque requête ou réponse avant qu'elles n'atteignent l'application. Ceci est utile pour des tâches telles que l'ajout de jetons d'authentification, la journalisation et la gestion des erreurs à l'échelle mondiale, rendant notre code plus propre et plus facile à gérer.

Dans cet article de blog, nous apprendrons comment implémenter les intercepteurs de requêtes Axios dans une application Next.js. Nous commencerons par configurer Axios, puis nous verrons comment créer et utiliser des intercepteurs de requêtes et de réponses. À la fin, vous saurez comment utiliser les intercepteurs pour améliorer votre application et garder votre code organisé.

Configurer le projet

Avant de découvrir comment implémenter les intercepteurs de requêtes Axios dans une application Next.js, assurez-vous d'avoir les éléments suivants :

• Node.js et npm/yarn installés : Assurez-vous que Node.js et npm (ou fil) sont installés sur votre machine. Vous pouvez télécharger Node.js à partir d'ici.

• Une configuration de projet Next.js : Vous devriez avoir une configuration de projet Next.js. Si vous n'en avez pas, vous pouvez créer un nouveau projet Next.js à l'aide de Create Next App :
  

npx create-next-app my-axios-app
cd my-axios-app
npm install axios

ou

yarn add axios

Implémentation d'intercepteurs de requêtes

Les intercepteurs de requêtes dans Axios vous permettent de modifier les requêtes avant qu'elles n'atteignent le serveur. Ils sont utiles pour ajouter des jetons d’authentification, définir des en-têtes personnalisés ou enregistrer des demandes. Voici comment implémenter les intercepteurs de requêtes Axios dans une application Next.js.

Étape 1 : Créer une instance Axios

Créez un nouveau fichier axiosInstance.js dans le dossier lib (ou n'importe quel emplacement préféré dans votre projet). Vous pouvez ajouter un intercepteur de requêtes à l'instance Axios que vous avez créée précédemment. Cet intercepteur sera exécuté avant l'envoi de chaque requête.

La création d'une instance Axios vous permet de définir des configurations par défaut, telles que l'URL de base et les en-têtes, qui seront appliquées à toutes les requêtes effectuées avec cette instance. Cela aide à garder votre code SEC (Ne vous répétez pas).

Créez un nouveau fichier nommé axiosInstance.js dans votre dossier lib et configurez votre instance Axios :

// lib/axiosInstance.js
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://dummyjson.com', // Replace with your API base URL
  timeout: 1000,
  headers: { 'Content-Type': 'application/json' }
});

// Add a request interceptor
axiosInstance.interceptors.request.use(
  function (config) {
    // Do something before the request is sent
    // For example, add an authentication token to the headers
    const token = localStorage.getItem('authToken'); // Retrieve auth token from localStorage
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  function (error) {
    // Handle the error
    return Promise.reject(error);
  }
);

export default axiosInstance;

Voici un résumé de ce que nous avons fait :

• Création d'une instance Axios en utilisant axios.create().
• Définissez baseURL sur l'URL de base de votre API. Vous pouvez l'ajuster en fonction de la configuration de votre API.
• Utilisé interceptors.request.use() pour intercepter et modifier les requêtes sortantes. Cela nous permet d'ajouter des en-têtes, des jetons d'authentification ou d'apporter d'autres modifications à la configuration de la demande.

Étape 2 : utiliser l'instance Axios dans les pages ou composants Next.js

Une fois l'intercepteur de requêtes configuré, vous pouvez utiliser l'instance Axios dans vos pages ou composants Next.js comme d'habitude. L'intercepteur ajoutera automatiquement le jeton (ou effectuera toute autre action configurée) avant l'envoi de chaque demande.

// pages/index.js
import React, { useEffect, useState } from 'react';
import axiosInstance from '../lib/axiosInstance';

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axiosInstance.get('/products/1') // Replace with your API endpoint
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      {data ? (
        <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

) : (

Loading...

)}

); }

Copier après la connexion

Étape 3 : personnalisation de l'intercepteur

Vous pouvez personnaliser l'intercepteur de requêtes pour effectuer d'autres actions selon vos besoins. Par exemple, vous souhaiterez peut-être enregistrer les détails de chaque demande :

axiosInstance.interceptors.request.use(
  function (config) {
    // Log the request details
    console.log('Request:', config);
    return config;
  },
  function (error) {
    // Handle the error
    return Promise.reject(error);
  }
);

Cette configuration enregistrera les détails de chaque requête dans la console, ce qui peut être utile à des fins de débogage.

En implémentant des intercepteurs de requêtes dans votre application Next.js, vous pouvez vous assurer que toutes les requêtes sont systématiquement modifiées ou améliorées avant d'être envoyées, améliorant ainsi la maintenabilité et la fonctionnalité de votre code.

Implémentation d'intercepteurs de réponse

De la même manière que les intercepteurs de requêtes vous permettent de modifier les requêtes sortantes, les intercepteurs de réponses dans Axios vous permettent de gérer les réponses globalement avant qu'elles n'atteignent le code de votre application. Ceci est particulièrement utile pour les tâches telles que la gestion des erreurs, la transformation des réponses et la journalisation. Explorons comment implémenter des intercepteurs de réponses dans une application Next.js à l'aide d'Axios.

Étape 1 : Créer l'intercepteur de réponse

Dans votre fichier axiosInstance.js, vous pouvez ajouter un intercepteur de réponse à l'instance Axios que vous avez créée. Cet intercepteur sera exécuté après chaque réponse reçue.

// lib/axiosInstance.js
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://dummyjson.com', // Replace with your API base URL
  timeout: 1000,
  headers: { 'Content-Type': 'application/json' }
});

// Add a request interceptor
axiosInstance.interceptors.request.use(
  function (config) {
    // Do something before the request is sent
    const token = localStorage.getItem('authToken'); // Retrieve auth token from localStorage
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  function (error) {
    // Handle the error
    return Promise.reject(error);
  }
);

// Add a response interceptor
axiosInstance.interceptors.response.use(
  function (response) {
    // Do something with the response data
    console.log('Response:', response);
    return response;
  },
  function (error) {
    // Handle the response error
    if (error.response && error.response.status === 401) {
      // Handle unauthorized error
      console.error('Unauthorized, logging out...');
      // Perform any logout actions or redirect to login page
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

Step 2: Use the Axios Instance in Next.js Pages or Components

With the response interceptor set up, you can use the Axios instance in your Next.js pages or components as usual. The interceptor will automatically handle responses and errors based on your configuration.

// pages/index.js
import { useEffect, useState } from 'react';
import axiosInstance from '../lib/axiosInstance';

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axiosInstance.get('/products/1') // Replace with your API endpoint
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      {data ? (
        <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

) : (

Loading...

)}

); }

Copier après la connexion