API Mate

API Mate 是一个 VSCode 插件，可以查看 YApi 或者 swagger(OpenAPI V2)，并且根据文档插入接口请求的 typescript 代码片段。

主要功能：

• 同步Yapi/Swagger接口
• 自动生成接口参数及返回值的类型定义
• 自动生成接口请求函数代码
• 从接口列表可以直接跳转到Yapi接口详情页面
• 查找项目中已经插入的接口请求代码

配置

api-mate.projects: []

项目列表

例子:

{
  "api-mate.projects": [
    {
      // 项目名称不能重复
      "name": "project1",
      // 类型 yapi / swagger
      "type": "yapi",
      // 地址
      "host": "http://127.0.0.1:3000",
      // yapi项目得token
      "token": "project1_token",
      // yapi项目id
      "projectId": 11
    },{
      "name": "project2",
      "type": "yapi",
      "host": "http://127.0.0.1:4000",
      "token": "project2_token",
      "projectId": 37
    },
    {
      "name": "Swagger project",
      "type": "swagger",
      "host": "https://petstore.swagger.io/v2/swagger.json",
    }
  ],
  ...
}

api-mate.templateFilePath

模板文件路径(相对于工作目录)

输出代码模板语法

输出代码使用 ejs 编译，语法可以可以参考 ejs 文档

模板文件默认路径: ${workspaceFolder}/template.apimate

模板支持的变量

• @property {string} method_name 方法名，默认值：requestMethod
• @property {string} http_method http 方法类型，例如：get, post, delete...
• @property {string} response_type response 数据类型名, 默认值：ResDataType
• @property {array} params - 请求接口方法的入参列表，例子：['name', 'age', 'sex']
• @property {boolean} need_request_body - 接口是否需要 request body
• @property {string} req_body_type - request body 类型，默认值：ReqBodyType
• @property {string} res_type - response body 类型，默认值 ResBodyType
• @property {string} path - 接口路径
• @property {array} query_params - query 参数列表
• @property {string} params_str - 已拼接的入参字符串，默认都是 string 类型，例子：'name: string, age: string, sex: string'
• @property {string} query_params_str - 已拼接的 query 参数，例子：'page=${page}&pageSize=${pageSize}'

默认模板

export async function <%= method_name %>(<%= params_str %><% if (need_request_body) { %><% if (params_str) { %>, <% } %>reqBody: <%= req_body_type %><% } %>) {
  return request<<%= response_type %>>(`<%= path %><%- query_params_str %>`, {
    method: '<%= http_method %>',<% if (need_request_body) { %> 
    data: {
      ...reqBody,
    },<% } %>
  });
}

模板例子

~~~FunctionTemplate
export async function <%= method_name %>(<%= params_str %><% if (need_request_body) { %><% if (params_str) { %>, <% } %>reqBody: <%= req_body_type %><% } %>) {
  return request<<%= response_type %>>(`<%= path %><%- query_params_str %>`, {
    method: '<%= http_method %>',<% if (need_request_body) { %> 
    data: {
      ...reqBody,
    },<% } %>
  });
  /***/
}
~~~

输出代码例子

  export class request {
    requestMethod(page: string, pageSize: string, sex: string, name: string) {
      return this.http.get<ResponseDataType>(
        `/admin/user/getUsers?page=${page}&pageSize=${pageSize}&sex=${sex}`
      );
    }
  }