菜鸟教程
教程 axios tutorial

请求拦截器的作用与用法

Axios 的请求拦截器可以在请求发送之前，对请求配置进行处理，常用于添加认证信息、统一设置 headers、日志记录或参数处理。

1. 添加请求拦截器

javascript 
import axios from "axios";

const instance = axios.create({
  baseURL: "https://api.example.com",
  timeout: 7000,
});

instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做处理，例如添加 Token
    const token = localStorage.getItem("auth_token");
    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`;
    }

    console.log("请求配置：", config);
    return config;
  },
  (error) => {
    // 请求错误处理
    return Promise.reject(error);
  }
);

2. 请求拦截器应用场景

  • 统一添加 Token：无需每个请求单独添加认证信息；
  • 日志记录：记录请求参数和 URL 便于调试；
  • 动态修改参数：根据环境或用户信息动态修改请求配置；
  • 防止重复请求：可在拦截器中判断重复请求并取消。

3. 使用示例

javascript 
instance
  .get("/users/123")
  .then((res) => console.log("用户数据：", res.data))
  .catch((err) => console.error("请求失败：", err));

💡 小提示：请求拦截器在发送请求前统一处理配置，提高代码可维护性和安全性，尤其适合大型前端项目。

相关内容