高效前端开发:探索 genapi 自动化 API 代码生成工具

在快节奏的前端开发世界中,与后端的有效对接是成功的关键。但是,手动编写和调试 API 代码常常耗时费力,且易于出错。在这个过程中,开发者不仅要面对接口的复杂性,还要确保代码的准确性和高效性。这常常是一项挑战,尤其是在面对紧迫的项目截止日期时。那么,有没有一种方法能在保证代码准确性和效率的同时,也能解放你的双手,让你从繁琐的编码工作中解脱出来呢?

简介

genapi 它能够将 OpenApi (v2~v3) 和其他输入源转换为 TypeScript/JavaScript 的 API 代码。如果你的后端使用 Swagger 展示文档,就可以用于生成接口与类型注释。genapi 目前还支持多种请求库的生成(axios|fetch|ky|got|ofetch)你可以根据你的需求安装。

  • swag-axios-ts|swag-axios-js
  • swag-fetch-ts|swag-fetch-js
  • swag-ky-ts|swag-ky-js
  • swag-got-ts|swag-got-js
  • swag-ofetch-ts|swag-ofetch-js

生成效果:

使用

在项目文件夹中本地安装:

sh 复制代码
pnpm add @genapi/cli @genapi/swag-axios-ts -D
# Or Yarn
yarn add @genapi/cli @genapi/swag-axios-ts --dev

接下来首先我们得找到后端的 swagger 文档地址(一般都会部署)

打开 F12,在 Network 中找到请求接口 JSON API 的地址:

在你的项目目录中创建 genapi.config.ts 文件,并添加以下内容:

ts 复制代码
import { defineConfig } from '@genapi/config'

const config = defineConfig({
  pipeline: 'swag-axios-ts',
  input: 'https://petstore.swagger.io/v2/swagger.json',
  output: 'src/apis/index.ts',
})

export default config

执行生成脚本:

sh 复制代码
pnpm genapi

生成的代码示例:

  • index.ts 包含了具体的 API 函数。
  • index.type.ts 包含了相关的 TypeScript 类型定义。

index.ts

ts 复制代码
import * as Types from "./index.type";
import http, { AxiosRequestConfig } from "axios";

export const baseURL = "https://petstore.swagger.io/v2/";

/**
 * @summary uploads an image
 * @method post
 * @tags pet
 * @consumes multipart/form-data
 */
export function postPetPetIdUploadImage(data: FormData, paths: Types.PostPetPetIdUploadImagePath, config?: AxiosRequestConfig) {
  const url = `/pet/${paths.petId}/uploadImage`;
  return http.request<Types.ApiResponse>({ baseURL, method: "post", url, data, ...config });
}
/**
 * @summary Add a new pet to the store
 * @method post
 * @tags pet
 * @consumes application/json; application/xml
 */
export function postPet(data: Types.Pet, config?: AxiosRequestConfig) {
  const url = "/pet";
  return http.request<void>({ baseURL, method: "post", url, data, ...config });
}

index.type.ts

ts 复制代码
export interface Pet {
  id?: number;
  category?: Category;
  name: string;
  photoUrls: string[];
  tags?: Tag[];
  /** @description pet status in the store */
  status?: string;
}
export interface PostPetPetIdUploadImagePath {
  /** @description ID of pet to update */
  petId: number;
}

小结

通过 genapi,前端开发者可以大幅减少手动编写和维护 API 代码的时间,将更多精力集中在业务逻辑的实现上。这不仅提高了开发效率,也降低了出错的概率。了解更多关于 genapi 的信息,请访问 GitHub 项目主页

相关推荐
非凡ghost1 天前
Affinity Photo(图像编辑软件) 多语便携版
前端·javascript·后端
非凡ghost1 天前
VideoProc Converter AI(视频转换软件) 多语便携版
前端·javascript·后端
endlesskiller1 天前
3年前我不会实现的,现在靠ai辅助实现了
前端·javascript
用户904706683571 天前
commonjs的本质
前端
暴躁老砚1 天前
Windows-MCP.Net本地调试指北
后端
Sailing1 天前
5分钟搞定 DeepSeek API 配置:从配置到调用一步到位
前端·openai·ai编程
Pa2sw0rd丶1 天前
如何在 React 中实现键盘快捷键管理器以提升用户体验
前端·react.js
JavaGuide1 天前
招银网络校招开奖了(附后端面经详解)
后端·求职
阿杰AJie1 天前
如何在程序中避免出现大量if和case
java·后端
sheji34161 天前
【开题答辩全过程】以 基于Asp.Net网上图书店的设计与实现为例,包含答辩的问题和答案
后端·asp.net