📘 Axios.interceptors使用说明

下面是一份详细的 Axios 拦截器使用说明文档，包括请求拦截器、响应拦截器、常见用法示例以及错误处理。

---

📘 Axios 拦截器使用说明

什么是拦截器？

Axios 拦截器是一种机制，允许你在请求发送前或响应到达后，对请求或响应进行统一的处理。

Axios 提供了两类拦截器：

• axios.interceptors.request：请求拦截器，请求发出前执行。
• axios.interceptors.response：响应拦截器，响应返回后执行。

---

✅ 请求拦截器（Request Interceptor）

基本用法：

axios.interceptors.request.use(
  function (config) {
    // 在请求发送之前做一些处理
    return config;
  },
  function (error) {
    // 请求出错时做的处理
    return Promise.reject(error);
  }
);

示例：为每个请求添加 Authorization Token

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) {
    // 添加 Authorization 请求头
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, (error) => {
  // 请求错误处理
  return Promise.reject(error);
});

---

✅ 响应拦截器（Response Interceptor）

基本用法：

axios.interceptors.response.use(
  function (response) {
    // 对响应数据进行处理
    return response;
  },
  function (error) {
    // 对响应错误做处理
    return Promise.reject(error);
  }
);

示例：统一处理服务器返回的错误信息

axios.interceptors.response.use(
  (response) => {
    // 响应成功，可直接返回 response.data
    return response.data;
  },
  (error) => {
    // 处理错误，例如 token 过期、权限不足、服务器错误等
    if (error.response) {
      const status = error.response.status;

      switch (status) {
        case 401:
          alert("未授权，请登录！");
          // 跳转登录页或清除 token
          break;
        case 403:
          alert("权限不足！");
          break;
        case 500:
          alert("服务器内部错误！");
          break;
        default:
          alert("请求错误：" + status);
      }
    } else if (error.request) {
      alert("无响应，请检查网络！");
    } else {
      alert("请求异常：" + error.message);
    }

    return Promise.reject(error);
  }
);

---

📌 使用场景总结

场景	请求拦截器	响应拦截器
添加 Token、全局 header	✅	❌
日志记录（console.log 请求信息）	✅	✅
请求 loading 动画控制	✅ 开始 loading	✅ 停止 loading
错误提示（如 401、500）	❌	✅
统一处理 response.data	❌	✅

---

🧰 清除拦截器

如果你在某些情况下（如组件卸载）想清除拦截器：

const reqInterceptor = axios.interceptors.request.use(...);
const resInterceptor = axios.interceptors.response.use(...);

// 清除拦截器
axios.interceptors.request.eject(reqInterceptor);
axios.interceptors.response.eject(resInterceptor);

---

🧪 示例整合（完整注册方式）

import axios from "axios";

// 创建实例
const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 5000,
});

// 请求拦截器
api.interceptors.request.use((config) => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});

// 响应拦截器
api.interceptors.response.use((response) => {
  return response.data;
}, (error) => {
  if (error.response) {
    switch (error.response.status) {
      case 401:
        console.warn("未授权，重定向到登录");
        break;
      case 500:
        console.error("服务器错误");
        break;
    }
  }
  return Promise.reject(error);
});

export default api;

---

🚨 注意事项

• 拦截器对所有请求都生效，小心不要误处理。
• 注意区分 axios.interceptors 和 axios.create().interceptors，后者是实例级的拦截器。
• 可以链式注册多个拦截器，但要注意顺序和性能影响。

---