和服务端进行交互

前端请求流程

在 pax-admin-pro 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

UI 组件交互操作；
调用统一管理的 api service 请求函数；
使用封装的 request.js 发送请求；
获取服务端返回；
更新 data。

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 @/api 文件夹中，并且一般按照 model 维度进行拆分文件，如：

api/
  login.ts
  admin.ts
  role.ts
  ...

request.ts

其中，@/utils/request 是基于 axios 的封装，便于统一处理 POST，GET，PATCH，DELETE 等请求参数，请求头，以及错误提示信息等。它封装了全局 request拦截器、response拦截器、统一的错误处理、统一做了超时处理、baseURL设置等。

一个请求角色列表页的例子：

// api/role.ts
import config from '@/config'
import request from '@/utils/request'
export function roleLists(params: any) {
    return request.get({
        baseURL: config.userCenter,
        url: '/roles',
        params
    })
}


// views/role/list
<script lang="ts" setup name="role">
import { roleLists } from '@/api/perms/role'
import { usePaging } from '@/hooks/usePaging'
const { pager, getLists } = usePaging({
    fetchFun: roleLists
})
</script>

设置 TypeScript 类型

类型放在 @/types 中

✅ 类型约定原则

类型名	用法说明
`AdminListRequest`	请求参数类型：通常以 `Request` 结尾
`AdminItem`	单个数据项类型：通常以 `Item` 结尾
`AdminListResponse`	响应结果类型（如分页）：以 `Response` 结尾

和服务端进行交互

前端请求流程

request.ts

一个请求角色列表页的例子：

设置 TypeScript 类型

On this page