OpenAPI自动生成前端请求代码

传统开发中，前端想要请求后端接口，都要针对每个请求单独编写代码，很麻烦

使用OpenAPI工具，能够自动生成请求代码

安装axios

在src目录下新建request.ts文件

import axios from 'axios'
​
// 创建 Axios 实例
const myAxios = axios.create({
    baseURL: 'http://localhost:8080',
    timeout: 60000,
    withCredentials: true,
})
​
// 全局请求拦截器
myAxios.interceptors.request.use(
    function (config) {
        return config
    },
    function (error) {
        // Do something with request error
        return Promise.reject(error)
    },
)
​
// 全局响应拦截器
myAxios.interceptors.response.use(
    function (response) {
        return response
    },
    function (error) {
        return Promise.reject(error)
    },
)
​
export default myAxios
​

安装使用OpenAPI

1、安装

npm i --save-dev @umijs/openapi

2、在项目的根目录新建openapi.config.js

import { generateService } from '@umijs/openapi'
​
generateService({
  requestLibPath: "import request from '@/request'",
  schemaPath: 'http://localhost:8080/api/v2/api-docs',
  serversPath: './src',
})

注意：其中schemaPath需要改为自己后端提供的Swagger接口文档地址

3、在package.json的script中添加如下代码

"openapi":"node openapi.config.js"

执行即可生成请求代码，还包括typescript类型

以后每次后端接口发生变更时，只需要重写执行openapi重写生成一份即可