Nextjs 中 Axios 请求拦截器的实现方法

在Nextjs开发中，Axios是一个常用的HTTP客户端库，用于发送HTTP请求。请求拦截器是Axios的一个强大功能，它允许我们在请求发送前对请求进行一些处理，比如添加请求头、处理请求参数等。本文将介绍在Nextjs中如何实现Axios请求拦截器。

我们需要安装Axios。在Nextjs项目的根目录下，打开终端并执行以下命令：

npm install axios

安装完成后，我们可以在需要使用Axios的地方引入它：

import axios from 'axios';

接下来，我们创建一个Axios实例，并设置请求拦截器。在项目中创建一个axios.js文件，内容如下：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://your-api-url.com',
});

instance.interceptors.request.use(
  (config) => {
    // 在请求头中添加认证信息
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default instance;

在上述代码中，我们首先创建了一个Axios实例，并设置了基础URL。然后，我们使用interceptors.request.use方法来设置请求拦截器。在拦截器的回调函数中，我们可以对请求进行处理。这里我们获取了本地存储中的认证令牌，并将其添加到请求头中。

最后，我们可以在组件中使用这个Axios实例来发送请求：

import axiosInstance from './axios';

const getData = async () => {
  try {
    const response = await axiosInstance.get('/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

通过以上步骤，我们就成功地在Nextjs中实现了Axios请求拦截器。使用请求拦截器可以方便地对请求进行统一处理，提高代码的可维护性和安全性。我们还可以根据实际需求在拦截器中添加更多的逻辑，比如处理请求参数、设置请求超时时间等。