Alova API 模块生成器

基于 Alova 请求库创建 API 模块和 Mock 数据。

目录结构

src/api/ ├── core/ │ └── instance.ts # Alova 实例配置 ├── mock/ │ ├── modules/ # Mock 模块目录 │ │ ├── user.ts # 用户相关 Mock │ │ └── product.ts # 商品相关 Mock │ ├── mockAdapter.ts # Mock 适配器 │ └── utils/ # Mock 工具函数 ├── apiDefinitions.ts # API 定义（自动生成） ├── createApis.ts # API 创建函数 └── index.ts # API 导出入口

创建 Mock 模块

模块模板

// src/api/mock/modules/{moduleName}.ts import { defineMock } from '@alova/mock'

export default defineMock({ // GET 请求 '/api/{moduleName}/list': () => { return { code: 200, message: 'success', data: { list: [], total: 0, }, } },

// POST 请求 '[POST]/api/{moduleName}/create': ({ data }) => { return { code: 200, message: '创建成功', data: { id: Date.now(), ...data }, } },

// 带路径参数 '/api/{moduleName}/{id}': ({ params }) => { return { code: 200, message: 'success', data: { id: params.id }, } }, })

注册 Mock 模块

// src/api/mock/mockAdapter.ts import userMock from './modules/user' import productMock from './modules/product' // 导入新模块 import newModuleMock from './modules/{moduleName}'

export default createAlovaMockAdapter([ userMock, productMock, newModuleMock, // 注册新模块 ], { enable: import.meta.env.DEV, delay: 300, })

使用 API

useRequest Hook

// 基础请求 const { data, loading, error, send } = useRequest( Apis.user.getUserInfo({ id: '123' }), { immediate: true } )

// 手动触发 const { send: fetchData } = useRequest( (id: string) => Apis.user.getUserInfo({ id }), { immediate: false } ) await fetchData('123')

usePagination Hook

const { data: list, page, pageSize, total, loading, isLastPage, refresh, reload, } = usePagination( (page, pageSize) => Apis.product.getList({ page, pageSize }), { initialPage: 1, initialPageSize: 10, total: (res) => res.total, data: (res) => res.list, } )

响应数据类型

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

export interface PaginatedData<T> { list: T[] total: number page: number pageSize: number }

export interface UserInfo { id: string name: string avatar: string }

配置文件

// alova.config.ts export default { input: 'https://api.example.com/openapi.json', output: 'src/api', // OpenAPI 自动生成配置 }