我们通常都有个场景，后端swagger文档接口里有上百个，有时候我们需要一个一个复制到自己的前端项目里面，效率极其低效且容易出错，所以本文教你如何基于swagger编写前端api模板来批量生成！

https://github.com/wen-haoming/create-sw-api 项目地址

效果图

✨ Features

简单易用，一键转化
模板支持，易用扩展
注释生成, 容易辨识

📦 Install

    npm install create-sw-api -g 
    npm install create-sw-api -D

🖥 Command

$ sw-api

    Usage: sw-api [options] [command]

    Options:
      -V, --version   output the version number 
      -h, --help      display help for command

    Commands:
      url           resolve url
      path          resolve path
      help [command]  display help for command

    Explames:
    sw-api url <api-docs-url>
    sw-api path <file-path>

🔨 Usage

模板变量名	含义
apiname	最后生成的api名称
params	解构出来的参数对象
method	方法名称比如get,post等
url	url
query	get的query参数放在对象里面
body	如果该方法没有body参数则渲染一个空对象 (暂时没想到一个好方案)

// example
// tpl.js
module.exports = ` export const {{apiname}} = ({{params}}) => request('{{url}}', {{{query}}}, {
    method: '{{method}}',
    body: {{body}},
});
`

😄 step

可以全局也可以是局部下载。

   npm install create-sw-api -g // 直接输入 sw-api 唤醒命令
   npm install create-sw-api -D // 如果安装在项目需要使用 npx sw-api 这个命令驱动

准备模版文件,根据你的业务不一样，编写自己的模板代码，比如我现在创建一个tpl.js

  // example
  // tpl.js
  module.exports = ` export const {{apiname}} = ({{params}}) => request('{{url}}', {{{query}}}, {
      method: '{{method}}',
      body: {{body}},
  });
  `

谷歌浏览器打开swagger文档地址, 打开调试模式的Network面板，查看其中api-docs名称的地址,并且复制下来

输入命令sw-api url api-docs名称的地址

 sw-api url <api-docs>  //全局安装
 sw-api url <api-docs>  //局部安装 npx命令 or package.json的script命令唤醒

然后命令行提示输入刚刚我们新创建的模板文件

please enter your func-api template name ？ tpl

自动生成完毕😄

如果有帮助的话记得去 https://github.com/wen-haoming/create-sw-api 点个小星星 后面会加入typescript的功能哟！

📝Advanced usage

模板文件除了默认返回字符串模板,还能返回一个对象。

module.exports = {
  template:``,
  header:`import {request} from './api'`,
  mapFileName:['error','yizhangtu','xialaguanli','jidu']
}

参数名称	含义
template	模板字符串
header	渲染模板的头部
footer	渲染模板的尾部
mapFileName	文件名称渲染映射

😘Q&A

1. 默认渲染的文件名称太长了有什么方法呢？

请参考高级用法的mapFileName参数,默认是按照swagger的顺序映射的，如果没有映射到的就采取默认的策略。