SuperAPI AI 工具集

alova-api-module

编程与开发

查看项目

更新于 10-16 10:09

技能介绍

Alova API 模块生成器面向基于 Alova 请求库的前端项目,用于快速创建 API 模块和 Mock 数据。

用途:该技能围绕 Alova 请求库,帮助在项目中搭建 API 层与 Mock 层,按约定目录生成请求模块定义和 Mock 数据。

目录结构:约定目录为 src/api/,包含 core/instance.ts(Alova 实例配置)、mock/modules/(Mock 模块目录,如 user.ts、product.ts)、mock/mockAdapter.ts(Mock 适配器)、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'、POST 请求 '[POST]/api/{moduleName}/create'(接收 { data })、带路径参数的 '/api/{moduleName}/{id}'(接收 { params }),返回值结构含 code、message、data。

注册 Mock 模块:在 src/api/mock/mockAdapter.ts 中导入各模块(如 userMock、productMock、newModuleMock),并传入 createAlovaMockAdapter([...], { enable: import.meta.env.DEV, delay: 300 }) 完成注册。

使用 API:提供 useRequest Hook,可用于基础请求(如 Apis.user.getUserInfo({ id: '123' }),配合 immediate: true)或手动触发(immediate: false 后 await fetchData('123'));提供 usePagination Hook,传入请求函数与 initialPage、initialPageSize、total、data 等配置,可获得 list、page、pageSize、total、loading、isLastPage、refresh、reload。

响应数据类型:在 src/api/types/{moduleName}.ts 中定义 ApiResponse<T>(code、message、data)、PaginatedData<T>(list、total、page、pageSize)、UserInfo(id、name、avatar)等接口。

配置文件:alova.config.ts 可配置 input(如 https://api.example.com/openapi.json)与 output(如 src/api),用于 OpenAPI 自动生成。

适用场景:需要在采用 Alova 的前端项目中新建 API 模块与配套 Mock 数据,或对接 OpenAPI 自动生成 API 定义的场景。

限制:除上述内容外,该技能的具体安装命令、支持的框架版本、收费方式与价格等细节暂未提供。