如何在 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...

)}