如何在 Next.js 中實作 Axios 請求攔截器

Axios 是一個廣泛使用的 JavaScript 函式庫，可以更輕鬆地向伺服器發送 HTTP 請求。它的突出功能之一是攔截器，它允許我們的應用程式捕獲請求和回應。 Axios 攔截器讓我們可以設定在每個請求或回應到達應用程式之前運行的函數。這對於全域新增身份驗證令牌、日誌記錄和處理錯誤等任務很有幫助，使我們的程式碼更乾淨、更易於管理。

在這篇文章中，我們將學習如何在 Next.js 應用程式中實作 Axios 請求攔截器。我們將從設定 Axios 開始，然後了解如何建立和使用請求和回應攔截器。最後，您將了解如何使用攔截器來改進您的應用程式並保持程式碼井井有條。

設定項目

在深入研究如何在 Next.js 應用程式中實作 Axios 請求攔截器之前，請確保您具備以下條件：

• 已安裝 Node.js 和 npm/yarn：請確保您的電腦上安裝了 Node.js 和 npm（或紗線）。您可以從這裡下載 Node.js。

• Next.js 專案設定：您應該要有 Next.js 專案設定。如果您沒有，您可以使用 Create Next App 建立一個新的 Next.js 專案：
  

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

或

yarn add axios

實施請求攔截器

Axios 中的請求攔截器可讓您在請求到達伺服器之前對其進行修改。它們對於新增身份驗證令牌、設定自訂標頭或記錄請求非常有用。以下是如何在 Next.js 應用程式中實作 Axios 請求攔截器。

步驟1：建立axios實例

在 lib 資料夾（或專案中的任何首選位置）中建立一個新檔案 axiosInstance.js。您可以將請求攔截器新增到先前建立的 Axios 實例中。該攔截器將在每個請求發出之前執行。

建立 Axios 實例可讓您設定預設配置，例如基本 URL 和標頭，這些配置將套用於使用該實例發出的所有請求。這有助於保持程式碼乾燥（不要重複）。

在 lib 資料夾中建立一個名為 axiosInstance.js 的新檔案並設定您的 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;

以下是我們所做工作的總結：

• 使用 axios.create().
建立了一個 Axios 實例
• 將 baseURL 設定為 API 的基本 URL。您可以調整它以符合您的 API 的配置。
• 使用interceptors.request.use()來攔截和修改傳出的請求。這允許我們新增標頭、身份驗證令牌或對請求配置進行其他變更。

步驟 2：在 Next.js 頁面或元件中使用 Axios 實例

設定請求攔截器後，您可以像往常一樣在 Next.js 頁面或元件中使用 Axios 實例。攔截器將在發送每個請求之前自動新增令牌（或執行任何其他配置的操作）。

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

)}