前端根据@umijs/openapi+swagger生成接口方法 补充

前端根据@umijs/openapi+swagger生成接口方法

之前为了节省项目Api导入 采用Umijs/openApi+swagger 自动解析swagger文档生成对应的Api访问代码 最近看代码发现上一个文章 这个问题的解决办法可自定义 request

openapi.config.ts 文件

ts 复制代码
import { generateService } from '@umijs/openapi';
generateService({
	schemaPath: 'xxx', // 可以是.json文件,也可以是远程json地址
	serversPath: './src/servers/java',
	requestLibPath: '@/common/utils/request', //自定义request 
});

@umijs/openapi 下 index.d.ts 文件

ts 复制代码
export declare const generateService: ({ requestLibPath, schemaPath, mockFolder, nullable, requestOptionsType, ...rest }: GenerateServiceProps) => Promise<void>;

@umijs/openapi 下 index.js 文件

js 复制代码
const getImportStatement = (requestLibPath) => {
    if (requestLibPath && requestLibPath.startsWith('import')) {
        return requestLibPath;
    }
    if (requestLibPath) { //请求库路径 
        return `import request from '${requestLibPath}'`;
    }
    return `import { request } from "umi"`; //默认选项
};

自定义Hook

ts 复制代码
import type { OpenAPIObject, OperationObject, SchemaObject } from 'openapi3-ts';
export declare type GenerateServiceProps = {
    requestLibPath?: string;
    requestOptionsType?: string;
    requestImportStatement?: string;
    /**
     * api 的前缀
     */
    apiPrefix?: string | ((params: {
        path: string;
        method: string;
        namespace: string;
        functionName: string;
        autoExclude?: boolean;
    }) => string);
    /**
     * 生成的文件夹的路径
     */
    serversPath?: string;
    /**
     * Swagger 2.0 或 OpenAPI 3.0 的地址
     */
    schemaPath?: string;
    /**
     * 项目名称
     */
    projectName?: string;
    hook?: {
        /** change open api data after constructor */
        afterOpenApiDataInited?: (openAPIData: OpenAPIObject) => OpenAPIObject;
        /** 自定义函数名称 */
        customFunctionName?: (data: OperationObject) => string;
        /** 自定义类型名称 */
        customTypeName?: (data: OperationObject) => string;
        /** 自定义 options 默认值 */
        customOptionsDefaultValue?: (data: OperationObject) => Record<string, any> | undefined;
        /** 自定义类名 */
        customClassName?: (tagName: string) => string;
        /**
         * 自定义获取type hook
         * 返回非字符串将使用默认方法获取type
         * @example set number to string
         * function customType(schemaObject,namespace){
         *  if(schemaObject.type==='number' && !schemaObject.format){
         *    return 'BigDecimalString';
         *  }
         * }
         */
        customType?: (schemaObject: SchemaObject | undefined, namespace: string, originGetType: (schemaObject: SchemaObject | undefined, namespace: string) => string) => string;
        /**
         * 自定义生成文件名,可返回多个,表示生成多个文件
         * 返回为空,则使用默认的获取方法获取
         * @example  使用operationId生成文件名
         * function customFileNames(operationObject,apiPath){
         *   const operationId=operationObject.operationId;
         *   if (!operationId) {
         *      console.warn('[Warning] no operationId', apiPath);
         *      return;
         *    }
         *    const res = operationId.split('_');
         *    if (res.length > 1) {
         *      res.shift();
         *      if (res.length > 2) {
         *        console.warn('[Warning]  operationId has more than 2 part', apiPath);
         *      }
         *      return [res.join('_')];
         *    } else {
         *      const controllerName = (res || [])[0];
         *      if (controllerName) {
         *        return [controllerName];
         *      }
         *      return;
         *    }
         * }
         */
        customFileNames?: (operationObject: OperationObject, apiPath: string, _apiMethod: string) => string[];
    };
    namespace?: string;
    /**
     * 默认为false,true时使用null代替可选
     */
    nullable?: boolean;
    mockFolder?: string;
    /**
     * 模板文件的文件路径
     */
    templatesFolder?: string;
    /**
     * 枚举样式
     */
    enumStyle?: 'string-literal' | 'enum';
    /**
     * response中数据字段
     * example: ['result', 'res']
     */
    dataFields?: string[];
    /**
     * 模板文件、请求函数采用小驼峰命名
     */
    isCamelCase?: boolean;
};
export declare const getSchema: (schemaPath: string) => Promise<any>;
export declare const generateService: ({ requestLibPath, schemaPath, mockFolder, nullable, requestOptionsType, ...rest }: GenerateServiceProps) => Promise<void>;
相关推荐
网络研究院7 分钟前
新工具可绕过 Google Chrome 的新 Cookie 加密系统
前端·chrome·系统·漏洞·加密·绕过
理想不理想v1 小时前
【问答】浏览器如何编译前端代码?
前端·javascript·css·html
风清云淡_A1 小时前
react18中redux-saga实战系统登录功能及阻塞与非阻塞的性能优化
前端·react.js
偷光1 小时前
React 中使用 Echarts
前端·react.js·echarts
Luckyfif1 小时前
Webpack 是什么? 解决了什么问题? 核心流程是什么?
前端·webpack·node.js
王哲晓1 小时前
第十五章 Vue工程化开发及Vue CLI脚手架
前端·javascript·vue.js
放逐者-保持本心,方可放逐1 小时前
react 框架应用+总结+参考
前端·前端框架·react
练习两年半的工程师1 小时前
建立一个简单的todo应用程序(前端React;后端FastAPI;数据库MongoDB)
前端·数据库·react.js·fastapi
爱编程的小金1 小时前
React-query vs. 神秘新工具:前端开发的新较量
前端·javascript·react.js·http·前端javascript
qq_427506081 小时前
react轮播图示例
前端·javascript·react.js