如何为Swagger API自动生成Axios请求代码示例？

Swagger UI 本身就支持自动生成代码片段，包括Axios请求示例，下面是具体实现方式：

1. 先确保OpenAPI规范没问题 #

你的API文档得遵循OpenAPI 3.x（优先推荐）或Swagger 2.0规范，并且把请求方法、参数、请求体这些信息都定义清楚。比如一个POST接口的规范示例：

paths:
  /users:
    post:
      summary: 创建用户
      requestBody:
        required: true
        content:
          application/json:
            schema:
              type: object
              properties:
                name:
                  type: string
                email:
                  type: string
      responses:
        '201':
          description: 用户创建成功

2. 用Swagger UI自带的代码生成功能 #

打开Swagger UI界面后，每个接口右侧都有个「Try it out」按钮，点击它填好参数，再点「Execute」，下方就会自动生成对应的请求代码片段。你可以通过界面顶部的「Select a language」下拉菜单选「Axios」——如果没看到这个选项，检查下Swagger UI的版本，旧版本可能不支持，建议升级到最新版。

3. 自定义Axios代码模板（进阶需求） #

要是默认生成的代码不符合你的项目风格（比如需要统一加拦截器、错误处理），可以自定义模板：

• 找到Swagger UI自带的代码模板（一般在swagger-ui/dist/lang目录里，或者通过配置指定路径）
• 复制现有的Axios模板文件，修改成你想要的代码结构
• 在初始化Swagger UI的时候，指定自定义模板的路径：

const ui = SwaggerUIBundle({
  url: "/openapi.json",
  dom_id: '#swagger-ui',
  presets: [
    SwaggerUIBundle.presets.apis,
    SwaggerUIStandalonePreset
  ],
  // 配置自定义Axios模板
  codegenTemplates: {
    axios: '/your-custom-axios-template.hbs'
  }
})

4. 批量生成Axios客户端代码 #

如果要一次性生成所有接口的Axios请求代码，用Swagger Codegen工具更高效：

• 安装Swagger Codegen（可以用Maven、Docker或者直接下载jar包）
• 执行下面的命令，就能基于你的OpenAPI规范生成完整的TypeScript+Axios客户端代码，包含所有接口的请求方法和类型定义：

swagger-codegen generate -i openapi.json -l typescript-axios -o ./axios-api-client

内容的提问来源于stack exchange，提问作者Gabriel TN