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.

Créer 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 utilisantaxios.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 ( 
 
Data from API
 {data ? ( 
{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 réception de chaque réponse.

// 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 ( 
 
Data from API
 {data ? ( 
{JSON.stringify(data, null, 2)}
) : (
       
Loading...
)}
      
); }
      

       Copier après la connexion
      
     

By implementing response interceptors in your Next.js application, you can centralize response handling, improving code maintainability and application robustness. Whether it’s logging, transforming data, or managing errors, response interceptors provide a powerful way to manage HTTP responses efficiently.

Framework-Independent Alternative: Using Requestly

While Axios has powerful tools for processing HTTP requests within applications, integrating and managing interceptors directly within your codebase can be difficult and demand changes to your application’s architecture. Instead of depending on framework-specific solutions such as Axios interceptors, developers can use Requestly, a browser extension that modifies network requests and responses without requiring any changes to the application’s code. This method has various advantages over standard interceptors:

Simplifying Modifications with Requestly

• No Code Changes Required: Unlike implementing interceptors in your application code, which requires understanding and modifying the codebase, Requestly operates entirely from the browser. This means developers can modify requests and responses dynamically without touching the application’s source code.
• Flexibility Across Technologies: Requestly’s framework-independent nature allows it to work seamlessly across different projects and technologies. Whether you’re working with React, Angular, Vue.js, or any other framework, Requestly provides a consistent interface for managing network traffic.

Advantages of Using Requestly

• Ease of Use: Requestly simplifies the process of modifying network requests and responses through an intuitive browser extension interface. This accessibility makes it ideal for developers of all skill levels, from beginners to advanced users.
• Immediate Testing and Debugging: With Requestly, developers can instantly test and debug different scenarios by altering headers, URLs, or response content. This capability speeds up development cycles and enhances troubleshooting efficiency.
• Enhanced Privacy and Security: Requestly empowers developers to block or modify requests to enhance privacy, security, and compliance with data protection regulations. For instance, blocking tracking scripts or adding secure headers can be done effortlessly.

Example Use Cases

• Modify Server Response: Modify response content to simulate various server behaviors without backend changes.
• Testing Different API Requests: Dynamically alter request to test different API endpoints or data payloads.
• Blocking Network Request: Test your website under scenarios where certain external resources are unavailable
• Adding Custom Headers: Add authentication tokens or custom CORS headers for testing APIs that require specific headers. ### How to use Requestly Interceptor

Modify API Response

Requestly allows you to modify API responses. It provides a user-friendly interface for overriding the response body of API requests, allowing you to mimic different data scenarios that your frontend might encounter.

Insert/Inject Script

Insert/Inject Script Rule allows you to inject JavaScript and CSS into web pages as they load. This means you can modify the DOM, change styles, or even add new functionality without altering the source code directly. It’s important for testing hypotheses or debugging during the development and quality assurance process. Learn more about it here.

Replace Rule

Replace Rule enables you to replace a String in URL with another String. This feature is particularly useful for developers to swap the API endpoints from one environment to another or change something specific in the URL. Requests are matched with source condition, and find and replace are performed on those requests by redirecting to the resulting URL. Learn more about this rule here.

Conclusion

Dans cet article de blog, nous avons exploré le concept puissant d'interception des requêtes avec Axios dans une application Next.js. Cela permet aux développeurs d'avoir plus de contrôle sur les requêtes et les réponses HTTP au sein de leurs applications. Qu'il s'agisse d'ajouter des jetons d'authentification, de journaliser les demandes à des fins de débogage ou de gérer les erreurs à l'échelle mondiale, les intercepteurs Axios offrent une solution flexible pour répondre à divers besoins de développement.

Si vous aimez ce blog, consultez notre autre blog sur Comment implémenter l'intercepteur Axios dans React

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!