高效前端开发：探索 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 项目主页。