请求封装与错误处理

Forge 前端通过统一的 request 工具函数封装 Axios，自动携带 Token、处理错误和跳转登录。你需要使用 @/utils/http 而非直接使用 Axios。

基本用法

import { request } from '@/utils/http'

// GET 请求
const data = await request.get('/system/user/page', {
  params: { pageNum: 1, pageSize: 10 }
})

// POST 请求
const result = await request.post('/system/user', {
  username: 'admin',
  nickname: '管理员'
})

// PUT 请求
const result = await request.put('/system/user', {
  id: 1,
  nickname: '新昵称'
})

// DELETE 请求
const result = await request.delete('/system/user/1')

自动携带 Token

request 工具自动在请求头添加 Authorization: Bearer <token>：

// 请求拦截器自动处理
config.headers['Authorization'] = `Bearer ${userStore.token}`

你不需要手动添加 Token 请求头。

响应处理

request 工具自动解析 RespInfo 响应：

// 后端返回
{ code: 200, msg: "操作成功", data: { id: 1, name: "张三" } }

// request 返回
{ id: 1, name: "张三" }  // 直接返回 data 字段

错误处理

错误码	处理方式
200	正常返回 data
400	提示参数错误
401	清除 Token，跳转登录页
403	提示无权限
500	提示系统异常

// 响应拦截器
response => {
  const res = response.data
  if (res.code !== 200) {
    // 错误提示
    window.$message.error(res.msg)

    if (res.code === 401) {
      // Token 过期，跳转登录
      userStore.clearToken()
      router.push('/login')
    }
    return Promise.reject(new Error(res.msg))
  }
  return res.data
}

API 模块化

在 src/api/ 下按模块定义 API：

// src/api/order.ts
import { request } from '@/utils/http'

export function getOrderPage(params) {
  return request.get('/biz/order/page', { params })
}

export function createOrder(data) {
  return request.post('/biz/order', data)
}

export function updateOrder(data) {
  return request.put('/biz/order', data)
}

export function deleteOrder(id) {
  return request.delete(`/biz/order/${id}`)
}

在页面中使用：

import { getOrderPage, createOrder } from '@/api/order'

const data = await getOrderPage({ pageNum: 1, pageSize: 10 })

请求参数

分页查询

request.get('/biz/order/page', {
  params: {
    pageNum: 1,
    pageSize: 10,
    orderNo: 'ORD001'  // 查询条件
  }
})

提交表单

request.post('/biz/order', {
  orderNo: 'ORD001',
  amount: 10000,
  status: '0'
})

环境变量

前端环境变量在 .env.local 中配置：

VITE_API_BASE_URL=http://localhost:8580

开发环境通过 Vite proxy 代理，生产环境通过 Nginx 代理。

注意事项

• 统一使用 request，不要直接 import axios
• 分页参数使用 pageNum + pageSize
• URL 路径不带 /api 前缀（Vite proxy 自动处理）
• 错误处理已封装，不需要每个调用都 try-catch