Skip to content

API 封装

所有 API 请求统一封装在 src/api/ 目录下,页面禁止直接写请求。

命名规范

fetch + 动作 + 资源名

ts
import request from '@/utils/http'

// 列表查询 — 使用 POST
export function fetchGetUserList(params: any) {
  return request.post<any>({ url: '/admin/system/user/list', params })
}

// 新增/编辑 — 使用 POST + data
export function fetchUpdateUser(data: any) {
  return request.post<any>({ url: '/admin/system/user/update', data })
}

// 删除 — 使用 DELETE
export function fetchDeleteUser(id: string) {
  return request.del<any>({ url: `/admin/system/user/${id}` })
}

// GET 查询
export function fetchGetRoleSelect() {
  return request.get<any[]>({ url: '/admin/system/role/select' })
}

带类型的 API

ts
// 请求类型
export interface SysLogListRequest {
  queryDate: string
  level?: string
  pageIndex?: number
  pageSize?: number
}

// 响应类型
export interface SysLogListResponse {
  total: number
  data: SysLogItem[]
}

// API 函数
export function fetchLogList(params: SysLogListRequest) {
  return request.post<SysLogListResponse>({
    url: '/admin/system/log/list',
    params
  })
}

类型可用 any

对接期间可以直接使用 any 类型,避免阻塞开发:

ts
export function fetchGetUserList(params: any) {
  return request.post<any>({ url: '/admin/system/user/list', params })
}

文件组织

src/api/
├── system-manage.ts    # 系统管理(用户、角色、菜单)
├── system-log.ts       # 系统日志
├── demo.ts             # 演示模块
└── ...

URL 规则

API URL 结构遵循后端路由规范:

/admin/module/resource/action
│       │       │        │
│       │       │        └── 操作(list/save/...)
│       │       └────────── 资源名
│       └────────────────── 业务模块
└────────────────────────── 前缀(admin/app/common)