前端根据@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>;
相关推荐
还是鼠鼠1 小时前
图书管理系统 Axios 源码__新增图书
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
还是鼠鼠4 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
轻口味4 小时前
Vue.js `Suspense` 和异步组件加载
前端·javascript·vue.js
m0_zj5 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
还是鼠鼠6 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
北极象6 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js
百度网站快速收录6 小时前
网站快速收录:如何优化网站头部与底部信息?
前端·html·百度快速收录·网站快速收录
Loong_DQX6 小时前
【react+redux】 react使用redux相关内容
前端·react.js·前端框架
GISer_Jing6 小时前
react redux监测值的变化
前端·javascript·react.js
engchina6 小时前
CSS 样式化表格:从基础到高级技巧
前端·css