代码拉取完成,页面将自动刷新
Pullcode是基于OpenAPI规范的封装了axios的typescript http请求客户端代码生成器。通过配置npm script命令即可直接将代码生成到指定目录下,直接使用。支持json格式的Swagger 2和OpenAPI 3(aka Swagger 3)文档。
npm install --save pullcode
注意:pullcode生成的代码里依赖pullcode中的代码,pullcode既是一个命令行工具,也是一个npm模块,所以必须用--save
,不能用--save-dev
。
➜ pullcode git:(master) ✗ pullcode -h
Usage: pullcode [options]
Options:
-o, --output <value> code output path
-u, --url <value> swagger 2.0 or openapi 3.0 json api document download url
-h, --help display help for command
生成代码时,pullcode首先会检查output目录里是否有BizService.ts
文件,如果已经存在,则忽略,不会覆盖。其他文件无论是否已存在都会覆盖。
"scripts": {
"pull": "pullcode -u https://petstore3.swagger.io/api/v3/openapi.json -o src/api"
},
执行命令npm run pull
打开BizService.ts
文件,根据后端接口请求地址和实际项目需要修改defaultOptions
配置参数
const defaultOptions: CreateAxiosOptions = {
requestOptions: {
apiUrl: '', // same as baseUrl
urlPrefix: '',
} as RequestOptions,
}
apiUrl
:如果配置了用于解决跨域问题的proxy,这里的apiUrl
只需设置成一个前缀即可。urlPrefix
:这个参数需要跟后端同事确认接口是否有前缀。可能是后端接口的服务名,也可能没有前缀。如果没有前缀,空字符串即可。transform
:设置自定义的axios拦截器。一般情况只需配置响应错误处理的拦截器。下文会给出示例代码。tokenGetter
:设置获取token的getter函数的。该函数会被request请求拦截器调用,并将返回的token放进header里。修改后的示例代码如下:
import { merge } from 'lodash-es';
import { CreateAxiosOptions, VAxios } from 'pullcode/src/httputil/Axios';
import { useGlobSetting } from '/@/hooks/setting';
import { transform } from '/@/api/interceptor'
import { getToken } from '/@/utils/auth';
import { RequestOptions } from 'pullcode/src/types/axios';
const globSetting = useGlobSetting();
const defaultOptions: CreateAxiosOptions = {
transform,
requestOptions: {
apiUrl: globSetting.apiUrl, // same as baseUrl
urlPrefix: '/myservice',
} as RequestOptions,
tokenGetter: getToken as () => string
}
export class BizService extends VAxios {
constructor(options?: Partial<CreateAxiosOptions>) {
super(merge(defaultOptions, options || {}));
}
}
export default BizService;
关于其他配置项,可自行查看CreateAxiosOptions
类型定义。
请参考完整示例:pullcode-quickstart
import type { AxiosResponse } from 'axios';
import type { AxiosTransform } from 'pullcode/src/httputil/axiosTransform';
import { checkStatus } from './checkStatus';
import { useMessage } from '/@/hooks/web/useMessage';
import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
import { useI18n } from '/@/hooks/web/useI18n';
const { createMessage, createErrorModal } = useMessage();
export const transform: AxiosTransform = {
/**
* @description: 响应错误处理
*/
responseInterceptorsCatch: (_: AxiosResponse, error: any) => {
const { t } = useI18n();
const errorLogStore = useErrorLogStoreWithOut();
errorLogStore.addAjaxErrorInfo(error);
const { response, code, message, config } = error || {};
const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none';
const msg: string = response?.data?.error?.message ?? '';
const err: string = error?.toString?.() ?? '';
let errMessage = '';
try {
if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
errMessage = t('sys.api.apiTimeoutMessage');
}
if (err?.includes('Network Error')) {
errMessage = t('sys.api.networkExceptionMsg');
}
if (errMessage) {
if (errorMessageMode === 'modal') {
createErrorModal({ title: t('sys.api.errorTip'), content: errMessage });
} else if (errorMessageMode === 'message') {
createMessage.error(errMessage);
}
return Promise.reject(error);
}
} catch (error) {
throw new Error(error as unknown as string);
}
checkStatus(error?.response?.status, msg, errorMessageMode);
return Promise.reject(error);
},
};
<script setup lang="ts">
import { petService } from '@/api/PetService';
import { Pet, PetStatusEnum } from '@/api/types';
import { ref } from 'vue';
let loading = ref(true);
let dataSource = ref([] as Pet[]);
petService.getPetFindByStatus({
status: PetStatusEnum.AVAILABLE,
}).then((resp: Pet[]) => {
dataSource.value = resp
loading.value = false
})
</script>
MIT
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。