Axios ist eine weit verbreitete JavaScript-Bibliothek, die das Senden von HTTP-Anfragen an Server erleichtert. Eine seiner herausragenden Funktionen ist der Interceptor, der es unserer App ermöglicht, Anfragen und Antworten abzufangen. Mit Axios-Interceptoren können wir Funktionen einrichten, die für jede Anfrage oder Antwort ausgeführt werden, bevor sie die Anwendung erreichen. Dies ist hilfreich für Aufgaben wie das Hinzufügen von Authentifizierungstokens, die Protokollierung und die globale Fehlerbehandlung, wodurch unser Code sauberer und einfacher zu verwalten ist.
In diesem Blogbeitrag erfahren Sie, wie Sie Axios-Request-Interceptors in einer Next.js-Anwendung implementieren. Wir beginnen mit der Einrichtung von Axios und sehen dann, wie man Anfrage- und Antwort-Interceptoren erstellt und verwendet. Am Ende wissen Sie, wie Sie Interceptoren verwenden, um Ihre Anwendung zu verbessern und Ihren Code zu organisieren.
Bevor Sie sich mit der Implementierung von Axios-Request-Interceptors in einer Next.js-Anwendung befassen, stellen Sie sicher, dass Sie über Folgendes verfügen:
Node.js und npm/yarn installiert: Stellen Sie sicher, dass Node.js und npm (oder Yarn) auf Ihrem Computer installiert sind. Sie können Node.js hier herunterladen.
Ein Next.js-Projekt-Setup: Sie sollten über ein Next.js-Projekt-Setup verfügen. Wenn Sie noch keines haben, können Sie mit „Nächste App erstellen“ ein neues Next.js-Projekt erstellen:
npx create-next-app my-axios-app cd my-axios-app npm install axios
oder
yarn add axios
Request-Interceptors in Axios ermöglichen es Ihnen, Anfragen zu ändern, bevor sie den Server erreichen. Sie sind nützlich zum Hinzufügen von Authentifizierungstokens, zum Festlegen benutzerdefinierter Header oder zum Protokollieren von Anforderungen. Hier erfahren Sie, wie Sie Axios-Request-Interceptors in einer Next.js-Anwendung implementieren.
Erstellen Sie eine neue Datei axiosInstance.js im lib-Ordner (oder an einem beliebigen bevorzugten Speicherort in Ihrem Projekt). Sie können der Axios-Instanz, die Sie zuvor erstellt haben, einen Request-Interceptor hinzufügen. Dieser Interceptor wird ausgeführt, bevor jede Anfrage gesendet wird.
Durch das Erstellen einer Axios-Instanz können Sie Standardkonfigurationen wie die Basis-URL und Header festlegen, die auf alle mit dieser Instanz gestellten Anfragen angewendet werden. Dies hilft dabei, Ihren Code trocken zu halten (Wiederholen Sie sich nicht).
Erstellen Sie eine neue Datei mit dem Namen axiosInstance.js in Ihrem lib-Ordner und richten Sie Ihre Axios-Instanz ein:
// 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;
Hier ist eine Zusammenfassung dessen, was wir getan haben:
Wenn der Request-Interceptor eingerichtet ist, können Sie die Axios-Instanz wie gewohnt in Ihren Next.js-Seiten oder -Komponenten verwenden. Der Interceptor fügt das Token automatisch hinzu (oder führt andere konfigurierte Aktionen aus), bevor jede Anfrage gesendet wird.
// 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...
)}
Sie können den Anforderungs-Interceptor anpassen, um bei Bedarf andere Aktionen auszuführen. Beispielsweise möchten Sie möglicherweise die Details jeder Anfrage protokollieren:
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);
}
);
Dieses Setup protokolliert die Details jeder Anfrage in der Konsole, was für Debugging-Zwecke hilfreich sein kann.
Durch die Implementierung von Anforderungsinterceptoren in Ihrer Next.js-Anwendung können Sie sicherstellen, dass alle Anforderungen vor dem Senden konsistent geändert oder erweitert werden, wodurch die Wartbarkeit und Funktionalität Ihres Codes verbessert wird.
Ähnlich wie Request-Interceptors es Ihnen ermöglichen, ausgehende Anfragen zu ändern, ermöglichen Ihnen Response-Interceptors in Axios, Antworten global zu verwalten, bevor sie Ihren Anwendungscode erreichen. Dies ist besonders hilfreich für Aufgaben wie Fehlerbehandlung, Antworttransformation und Protokollierung. Lassen Sie uns untersuchen, wie Sie mithilfe von Axios Antwort-Interceptoren in einer Next.js-Anwendung implementieren.
In Ihrer axiosInstance.js-Datei können Sie der von Ihnen erstellten Axios-Instanz einen Antwort-Interceptor hinzufügen. Dieser Interceptor wird ausgeführt, nachdem jede Antwort empfangen wurde.
// 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;
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...
)}
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.
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:
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.
In diesem Blogbeitrag haben wir das leistungsstarke Konzept des Abfangens von Anfragen mit Axios in einer Next.js-Anwendung untersucht. Dies ermöglicht Entwicklern eine bessere Kontrolle über HTTP-Anfragen und -Antworten in ihren Anwendungen. Ganz gleich, ob es darum geht, Authentifizierungstoken hinzuzufügen, Anfragen zu Debugging-Zwecken zu protokollieren oder Fehler global zu behandeln, Axios-Interceptors bieten eine flexible Lösung, um unterschiedlichen Entwicklungsanforderungen gerecht zu werden.
Wenn Ihnen dieser Blog gefällt, schauen Sie sich unseren anderen Blog zur Implementierung des Axios-Interceptors in React an
Das obige ist der detaillierte Inhalt vonSo implementieren Sie Axios Request Interceptors in Next.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
