So implementieren Sie Axios Request Interceptors in Next.js

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.

Richten Sie das Projekt ein

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

Implementieren von Request Interceptors

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.

Schritt 1: Erstellen Sie eine Axios-Instanz

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:

• Eine Axios-Instanz mit axios.create() erstellt.
• Setzen Sie die Basis-URL auf die Basis-URL Ihrer API. Sie können dies an die Konfiguration Ihrer API anpassen.
• Verwendet interceptors.request.use(), um ausgehende Anfragen abzufangen und zu ändern. Dadurch können wir Header und Authentifizierungstoken hinzufügen oder andere Änderungen an der Anforderungskonfiguration vornehmen.

Schritt 2: Verwenden Sie die Axios-Instanz in Next.js-Seiten oder -Komponenten

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...

)}