Skip to content

数据请求

项目使用统一的请求封装,配合 API 模块化管理接口调用。

请求封装

核心逻辑在 src/utils/request.ts

  • 有 token 自动添加 Authorization: Bearer <token>
  • 401 或业务码 A023x 时清除 token 并跳转登录页(防抖,避免并发请求多次跳转)
  • HTTP 2xx 但业务码非 00000 时,抛出 RequestError
  • 非微信小程序使用 VITE_APP_BASE_API 前缀(代理),微信小程序使用 VITE_APP_API_URL(完整 URL)
typescript
import request from "@/utils/request"

// GET
const data = await request<UserInfo>({ url: "/api/v1/users/me", method: "GET" })

// POST
const result = await request<LoginResult>({ url: "/api/v1/auth/login", method: "POST", data })

RequestError

请求失败时抛出 RequestError,包含 statusCodecode(业务码):

typescript
import { RequestError } from "@/utils/request"

try {
  await UserAPI.getUserInfo()
} catch (error) {
  if (error instanceof RequestError) {
    console.log(error.statusCode, error.code, error.message)
  }
}

API 模块化

每个 API 文件导出一个对象 + 类型定义:

typescript
// api/user.ts
import request from "@/utils/request"

const USER_BASE_URL = "/api/v1/users"

const UserAPI = {
  getUserInfo(): Promise<UserInfo> {
    return request<UserInfo>({ url: `${USER_BASE_URL}/me`, method: "GET" })
  },
  getPage(queryParams: UserPageQuery) {
    return request<PageResult<UserItem>>({
      url: `${USER_BASE_URL}`, method: "GET", data: queryParams,
    })
  },
}
export default UserAPI
export interface UserInfo { /* ... */ }

已有 API 模块

文件说明
auth.ts登录、刷新、验证码、登出
user.ts用户信息、个人中心、密码修改
role.ts角色管理
dept.ts部门管理
menu.ts菜单管理
dict.ts字典管理
notice.ts通知公告
log.ts操作日志、访问统计
config.ts系统配置
file.ts文件上传(使用 uni.uploadFile

错误处理

统一在 request.ts 处理通用错误,业务层只需 try/catch 特殊场景:

typescript
async function loadUserData() {
  try {
    userData.value = await UserAPI.getUserInfo()
  } catch {
    // 特殊业务处理
  }
}

文件上传

FileAPI 使用 uni.uploadFile 独立封装,自动携带 token:

typescript
import FileAPI from "@/api/file"

const fileInfo = await FileAPI.upload(tempFilePath)
// fileInfo.url — 文件访问地址

自查清单

  • [ ] 使用统一的 request 封装,不直接调用 uni.request
  • [ ] API 按模块组织在 api/ 目录
  • [ ] 业务码 00000 表示成功,非 2xx 或业务码异常由 request.ts 统一拦截

基于 MIT 许可发布 · 由 ❤️ 和 ☕ 驱动 · 支持作者