从零封装 Axios 请求模块，打造可复用的前端网络层

本文将带你一步步封装一个通用的 Axios 请求模块，包括统一的请求前/后拦截器、错误处理机制、自动 token 注入与全局 loading 管理，适合 Vue 或 React 项目复用。

---

✅ 一、为什么要封装 Axios？

在项目中直接调用 axios.get/post 虽然简单，但缺乏统一管理，容易出现：

• 多个文件重复代码
• 错误处理不一致
• Token 失效无法自动刷新
• 没有全局 Loading/提示控制

因此我们需要一个可维护、可扩展的请求模块。

---

📦 二、安装 Axios

bash
复制编辑
npm install axios

---

🧱 三、项目结构建议

css
复制编辑
src/
  utils/
    request.js        ← 封装的 axios 实例
  api/
    user.js           ← 用户模块 API
    article.js        ← 文章模块 API

---

🔧 四、封装 request.js

js
复制编辑
// src/utils/request.js
import axios from 'axios'

// 创建实例
const service = axios.create({
  baseURL: '/api',
  timeout: 5000,
})

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 添加 Token（如有）
    const token = localStorage.getItem('token')
    if (token) config.headers.Authorization = `Bearer ${token}`

    // 可添加 Loading 开启逻辑
    return config
  },
  (error) => Promise.reject(error)
)

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    const res = response.data
    if (res.code !== 0) {
      // 统一错误提示
      window.alert(res.message || '请求出错')
      return Promise.reject(res)
    }
    return res.data
  },
  (error) => {
    const { response } = error
    if (response) {
      switch (response.status) {
        case 401:
          window.alert('登录失效，请重新登录')
          break
        case 403:
          window.alert('权限不足')
          break
        default:
          window.alert('服务异常')
      }
    }
    return Promise.reject(error)
  }
)

export default service

---

📞 五、使用示例：用户接口

js
复制编辑
// src/api/user.js
import request from '@/utils/request'

export function login(data) {
  return request.post('/user/login', data)
}

export function getUserInfo() {
  return request.get('/user/info')
}

在页面中使用：

js
复制编辑
import { getUserInfo } from '@/api/user'

getUserInfo()
  .then((res) => {
    console.log('用户信息：', res)
  })
  .catch((err) => {
    console.error('请求失败：', err)
  })

---

💡 六、支持更多特性（可扩展）

你可以继续添加：

• 自动刷新 token（401 后调用 refresh 接口）
• 请求节流/防抖
• loading 状态控制（结合 vue loading 全局组件）
• 请求缓存（结合 sessionStorage 或缓存层）
• 请求取消功能（AbortController）

---

🧩 七、结合 UI 框架的实践

若项目中使用了 UI 框架，如 Element Plus、Ant Design Vue、Naive UI，可以用对应的 message 组件统一提示：

js
复制编辑
import { ElMessage } from 'element-plus'
// 替换 window.alert 为 ElMessage.error(msg)

---

📌 八、适用场景

• Vue / React 项目都适用
• 中大型项目统一网络层管理
• 希望提高代码复用性与开发效率

---

✅ 总结

封装 Axios 的关键好处：

• 实现请求逻辑复用
• 可统一处理 token、错误、loading
• 降低耦合，提升项目可维护性