react 实现自动创建api 请求文件

需求：

• 前后端分离的情况下前端要调用后端的接口要写很多接口调用的定义文件很繁琐，切没有意义都是体力劳动

进程：

• 让后端使用swagger 或者其他的openpai 格式的组件将server 端的接口喷出
• 如果是swagger 的话一般会有一个口子 /v2/api-docs
• 前端是react 使用 @umijs/openapi当然如果用了umi 的框架的话可以使用@umijs/plugin-openapi
• 安装对应的组件yarn add ts-node @umijs/openapi -D
• 但是如果node 的版本比较低的话这个安装可能会失败 error commander@12.0.0: The engine “node” is incompatible with this module. Expected version “>=18”. Got “16.15.0”
• 因为openapi 依赖了commander 但是没有指定他的版本号然后安装commander 的时候会发现最新版本需要的node 的版本和本地的版本不一样，或者说不够高
• 最简单的解决方案当然是升级node 的版本，但是升级node 版本的时候可能会导致其他的组件失效，所以我们需要在package.json 里面对这个组件指定一个版本

//与 devDependencies 同级
"resolutions": {
    "@umijs/openapi/**/commander": "10.0.1"
  }
1
2
3
4

• 这个行为指定了openapi 下的 commander 依赖都使用10.0.1 版本，如果需要其他版本可以自行去github 查看
• 安装成功之后在 package.json 里配置命令 "openapi": "ts-node openapi.config.ts"
• 配置openapi.config.ts

const { generateService } = require('@umijs/openapi')

generateService({
    schemaPath: 'http://***/v2/api-docs',//上面提到的swagger 的地址
    serversPath: './servers',//生成api 存放路径
})
1
2
3
4
5
6

• 运行 yarn openapi之后发现生成的api用的是import { request } from 'umi'但我们并没有使用umi 的框架怎么办
• openapi.config.ts 里添加一个参数

const { generateService } = require('@umijs/openapi')

generateService({
    requestLibPath: "import request from \"umi-request\"",//替换requst 的导入信息，推荐用umi-request
    schemaPath: 'http://***/v2/api-docs',//上面提到的swagger 的地址
    serversPath: './servers',//生成api 存放路径
})
1
2
3
4
5
6
7

• 安装yarn add umi-request

拓展：

• commander github 地址
• openapi github 地址