Vue大型项目API层封装与请求管理

大型Vue项目API层需统一管理HTTP请求，下面梳理核心封装策略。

axios实例配置

基础封装

// api/request.js
import axios from 'axios'

const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 15000,
  headers: { 'Content-Type': 'application/json' }
})

export default service

每个微服务或模块可创建独立axios实例，避免baseURL冲突。

拦截器设计

请求拦截器

service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => Promise.reject(error)
)

响应拦截器

service.interceptors.response.use(
  (response) => {
    const { code, data, message } = response.data
    if (code === 200) return data
    ElMessage.error(message || '请求失败')
    return Promise.reject(new Error(message))
  },
  (error) => {
    const { response } = error
    const statusMap = {
      401: '未授权，请重新登录',
      403: '拒绝访问',
      404: '资源不存在',
      500: '服务器错误'
    }
    ElMessage.error(statusMap[response?.status] || '网络异常')
    if (response?.status === 401) {
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

接口模块化管理

按业务模块拆分

// api/user.js
import request from './request'

export const userApi = {
  getList: (params) => request.get('/users', { params }),
  getById: (id) => request.get(`/users/${id}`),
  create: (data) => request.post('/users', data),
  update: (id, data) => request.put(`/users/${id}`, data),
  remove: (id) => request.delete(`/users/${id}`)
}

// api/order.js
import request from './request'

export const orderApi = {
  getList: (params) => request.get('/orders', { params }),
  create: (data) => request.post('/orders', data)
}

统一导出

// api/index.js
export { userApi } from './user'
export { orderApi } from './order'

请求类型定义

TypeScript类型支持

// api/types.ts
export interface ApiResponse<T = any> {
  code: number
  data: T
  message: string
}

export interface PageResult<T> {
  list: T[]
  total: number
  page: number
  size: number
}

要点总结

• 使用独立axios实例封装，避免全局配置污染
• 请求拦截器统一处理Token注入
• 响应拦截器统一处理错误码解析与提示
• 接口按业务模块拆分，每个模块导出独立API对象
• 大型项目应配合TypeScript提供类型约束

存放路径: articles/VUE/专家/大型项目架构分层设计/API层封装与请求管理.md