Ant Design Pro V5 OpenAPI

官方文档：https://beta-pro.ant.design/docs/openapi-cn

前言

Ant Design Pro升级到v5之后新引入了一个openapi的插件，这个是用来干什么的呢？

以前，我们写service文件时，都是根据swagger自定义接口名称，自己写注释，自己写接口调用方法，如果用的是TypeScript(以下简称Ts)，还需要自己一个字段一个字段的去定义字段的类型，后端接口没写好时还需要自己写mock数据自调。

现在，Pro v5出了一个OpenAPI，我们只需要简单的几个配置，就能根据swagger自动生成service文件，这个文件几乎包含你的所有需求，包括上面所列需手动操作的，还自动区分了目录（根据swagger目录区分），就连接口名都帮你定义好了（简直是起名困难户的福音）。

安装插件

我们使用umi搭建框架时，选择Pro v5版本就已经自带了openapi的插件，如果你使用的是非正式版本（大概自己升级到v5的属于非正式版本吧，本菜鸟也不懂啊）的 v5，可以通过下面的命令来安装这个插件：

yarn add @umijs/plugin-openapi

或者

npm i @umijs/plugin-openapi–save

回忆一下umi框架的目录结构

接下来，看一下具体操作。

首先，config.ts配置

import { join } from 'path';

openAPI: {
   
    requestLibPath: "import { request } from 'umi'",
    // 在线版本
    // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json",
    // 本地版本
    schemaPath: join(__dirname, 'oneapi.json'),
    mock: false,
    projectName: 'aaa' // 生成文件件名
  }

• requestLibPath：引入request的方式
一般我们都是使用umi自带的request，但是有些时候，我们需要更改request配置，比如在utils下面新建一个request文件：requestLibPath: “import request from ‘@utils/request’”,

• schemaPath：生成service文件的json地址
a. 在线版本：即swagger地址，需要json格式的才行
b. 本地json文件：一般在config文件里面新建一个json文件

• mock：设置为true自动生成假数据

先看一下官网给出的schemaPath格式：https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json

看了一下自己现在用的swagger，跟官网例子有些不一样，不过建swagger的时候按照OpenApi规范格式来，就能拿到我们需要格式的文件了

一番研究之后ÿ