Axios的二次封装

完整的 axios.js 封装

这个 axios.js 文件封装了：

• 请求拦截器（添加 token 到请求头）
• 响应拦截器（统一错误处理）
• 支持取消请求（AbortController）
• 动态 baseURL（根据环境自动切换）
• 超时时间（防止请求卡死）

---

📌 axios.js 封装

import axios from 'axios';

// 1️⃣ 动态 baseURL 配置
const BASE_URL = process.env.NODE_ENV === 'production' 
  ? 'https://api.prod.com'  // 生产环境
  : 'http://localhost:3000'; // 开发环境

// 2️⃣ 创建 Axios 实例
const createService = () => {
  const controller = new AbortController(); // 取消请求控制器
  const service = axios.create({
    baseURL: BASE_URL,  // 设置 baseURL
    timeout: 10000,     // 超时时间（10s）
    signal: controller.signal, // 绑定取消请求信号
    headers: {
      'Content-Type': 'application/json' // 默认 JSON 格式
    }
  });

  // 3️⃣ 请求拦截器
  service.interceptors.request.use(
    config => {
      const token = localStorage.getItem('token'); // 获取 Token
      if (token) {
        config.headers.Authorization = `Bearer ${token}`; // 统一携带 Token
      }
      return config;
    },
    error => {
      return Promise.reject(error);
    }
  );

  // 4️⃣ 响应拦截器
  service.interceptors.response.use(
    response => {
      return response.data; // 直接返回数据，省去 `data`
    },
    error => {
      if (error.response) {
        const status = error.response.status;
        switch (status) {
          case 401:
            console.error('未授权，请重新登录');
            localStorage.removeItem('token'); // 清除 token
            break;
          case 403:
            console.error('禁止访问');
            break;
          case 404:
            console.error('请求地址不存在');
            break;
          case 500:
            console.error('服务器错误');
            break;
          default:
            console.error('请求失败');
        }
      } else {
        console.error('网络异常');
      }
      return Promise.reject(error);
    }
  );

  return { service, controller };
};

// 导出封装好的 axios 实例
export default createService;

---

📌 如何在项目中使用

✅ 方式 1：发送 GET 请求

import createService from './axios';

const { service } = createService();

service.get('/users')
  .then(data => console.log(data))
  .catch(error => console.error(error));

---

✅ 方式 2：发送 POST 请求

import createService from './axios';

const { service } = createService();

service.post('/users', { name: 'Alice', age: 25 })
  .then(data => console.log(data))
  .catch(error => console.error(error));

---

✅ 方式 3：取消请求

import createService from './axios';

// 组件加载时发起请求
const { service, controller } = createService();

service.get('/users')
  .then(data => console.log(data))
  .catch(error => console.error(error));

// 取消请求（比如在用户离开页面时）
setTimeout(() => {
  controller.abort();
  console.log('请求已取消');
}, 2000);

---

📌 总结

功能	代码封装
动态 baseURL	process.env.NODE_ENV 自动切换
请求超时	timeout: 10000
请求拦截器	统一携带 token
响应拦截器	统一错误处理
支持取消请求	AbortController 取消请求

这样，我们的 axios 封装更加模块化、可维护、可扩展！🚀