在非 antd pro 项目中使用 umi OpenAPI

co松柏2024-07-03 9:25

大家好，我是松柏。

自从跟着鱼皮哥使用了ant design pro中的OpenAPI插件之后，我已经无法忍受自己写请求后端接口的方法了，所以这篇文章记录一下如何在非ant design pro项目中使用OpenAPI。

安装依赖

首先我们需要安装包@umijs/openapi：

bash 复制代码

yarn add @umijs/plugin-openapi

这其实就是在antd pro中使用的OpenAPI插件，它跟antd pro并没有什么耦合，可以在其它项目中直接使用。

然后安装请求库axios：

bash 复制代码

yarn add axios

当然也可以使用其它的请求库，我这里以axios为例。

配置

首先配置OpenAPI的生成规则，添加以下openapi.config.ts配置文件：

tsx 复制代码

import {generateService} from '@umijs/openapi'

generateService({
  // 请求工具路径，按实际项目更改，建议尽量按umi-request的参数格式定义请求工具。因为生成的server传参是按umi-request来的。
  requestLibPath: "import request from '@/../config/axios.config'",
  // 后端提供的swagger Json。ps：这里使用相对路径存在问题，没有解决。使用绝对路径、远程路径可以
  schemaPath: 'http://localhost:1101/api/v3/api-docs',
  // 生成servers的路径
  // serversPath: './servers',
  // 项目名称，生成server会在这个文件夹下
  projectName: 'backend-template-new-pine',
  // 命名空间，生成的类型命名空间
  namespace: 'backup',
});

然后新增axios.config.ts文件配置一下axios：

tsx 复制代码

import axios from "axios";

const request = axios.create({
  baseURL: "http://localhost:1101/api",
  headers: {
  },
});

export default request;

添加命令

在package.json文件的scripts中添加命令：

bash 复制代码

"openapi": "ts-node config/openapi.config.ts"

现在我们执行一下进行测试：

ok，执行成功！service目录下生成了接口文件：

之后就可以直接使用了。

这次分享就到这里了，拜拜👋🏻！