chore: 修改渲染器传送拦截器的方式,将采用合并的形式合并 axios 拦截器

This commit is contained in:
wangxuefeng 2025-03-21 13:43:17 +08:00
parent 828fe45a43
commit 4c59bfeb61
6 changed files with 59 additions and 43 deletions

View File

@ -1,18 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import type { AxiosInterceptorManager, AxiosResponse } from 'axios';
import { getCurrentInstance, onMounted, ref, watch } from 'vue'; import { getCurrentInstance, onMounted, ref, watch } from 'vue';
import { useQuery } from '@tanstack/vue-query'; import { useQuery } from '@tanstack/vue-query';
import { jsonp, request } from '@vtj/utils'; import { jsonp, request } from '@vtj/utils';
import { createProvider } from '@vtj/web'; import { createProvider } from '@vtj/web';
import { ElLoading, ElMessage } from 'element-plus'; import { ElLoading, ElMessage } from 'element-plus';
import { isFn } from 'licia-es';
import { LowCodeService } from './service'; import { LowCodeService } from './service';
// wujie props
interface WujieProps { interface WujieProps {
interceptors?: { interceptors?: {
request?: (config: any) => any; request: AxiosInterceptorManager<InternalAxiosRequestConfig>;
response?: (response: any) => any; response: AxiosInterceptorManager<AxiosResponse>;
}; };
// //
fileId: string; fileId: string;
@ -23,6 +25,17 @@ interface WujieProps {
[key: string]: any; [key: string]: any;
} }
declare global {
interface Window {
$wujie?: {
bus: {
$emit: (event: string, data?: any) => void;
};
props: WujieProps;
};
}
}
// //
interface InitParams { interface InitParams {
// //
@ -40,7 +53,7 @@ const isLoading = ref(false);
const provider = ref(null); const provider = ref(null);
const loadingInstance = ref(null); const loadingInstance = ref(null);
const errorMessage = ref(''); const errorMessage = ref('');
const initParams = ref<InitParams | null>(null); const initParams = ref<InitParams | null | WujieProps>(null);
// wujie // wujie
const isWujieSubApp = window.$wujie !== undefined; const isWujieSubApp = window.$wujie !== undefined;
@ -57,13 +70,11 @@ const getParamsFromUrl = (): Partial<InitParams> => {
// //
const getInitParams = (): InitParams | null => { const getInitParams = (): InitParams | null => {
// 1. wujie props
if (isWujieSubApp && window.$wujie?.props) { if (isWujieSubApp && window.$wujie?.props) {
const props = window.$wujie.props; const props: WujieProps = window.$wujie.props;
//
if (props.fileId && props.projectId) { if (props.fileId && props.projectId) {
console.log('使用wujie props初始化渲染器'); console.log('使用无界初始化渲染器');
return props as InitParams; return props as WujieProps;
} }
} }
@ -87,15 +98,32 @@ const isValidParams = (params: InitParams | null): params is InitParams => {
// //
const initRequestConfig = () => { const initRequestConfig = () => {
// if (!isWujieSubApp) return console.log('不是无界渲染模式,不进行拦截器合并');
if (initParams.value?.interceptors?.request) { const props = window.$wujie.props;
request.useRequest(initParams.value.interceptors.request); const mergeRequestInterceptors = () => {
} const requestHandlers = props.interceptors?.request?.handlers || [];
requestHandlers.forEach((handler) => {
if (isFn(handler?.fulfilled)) {
request.useRequest(
handler.fulfilled,
handler.rejected,
handler.options,
);
}
});
};
// const mergeResponseInterceptors = () => {
if (initParams.value?.interceptors?.response) { const responseHandlers = props.interceptors?.response?.handlers || [];
request.useResponse(initParams.value.interceptors.response); responseHandlers.forEach((handler) => {
} if (isFn(handler?.fulfilled)) {
request.useResponse(handler.fulfilled, handler.rejected);
}
});
};
mergeRequestInterceptors();
mergeResponseInterceptors();
}; };
// //

View File

@ -23,12 +23,11 @@ Sentry.init({
// 异常端信息追踪 // 异常端信息追踪
Sentry.browserTracingIntegration(), Sentry.browserTracingIntegration(),
// 异常反馈 // 异常反馈
Sentry.feedbackIntegration({ // Sentry.feedbackIntegration({
// Additional SDK configuration goes in here, for example: // colorScheme: 'system',
colorScheme: 'system', // isNameRequired: true,
isNameRequired: true, // isEmailRequired: true,
isEmailRequired: true, // }),
}),
], ],
// Session Replay // Session Replay
replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production. replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.

View File

@ -1,6 +1,6 @@
{ {
"name": "@sy/wujie-vue2-renderer-adapter", "name": "@sy/wujie-vue2-renderer-adapter",
"version": "1.0.0-alpha.3", "version": "1.0.0-alpha.4",
"description": "wujie-vue2 ycode renderer adapter", "description": "wujie-vue2 ycode renderer adapter",
"type": "module", "type": "module",
"scripts": { "scripts": {

View File

@ -113,5 +113,6 @@ export default defineComponent({
:props="subAppProps" :props="subAppProps"
:before-load="beforeLoad" :before-load="beforeLoad"
:after-mount="afterMount" :after-mount="afterMount"
:interceptors="interceptors"
/> />
</template> </template>

View File

@ -1,6 +1,6 @@
{ {
"name": "@sy/wujie-vue3-renderer-adapter", "name": "@sy/wujie-vue3-renderer-adapter",
"version": "1.0.0-alpha.4", "version": "1.0.0-alpha.5",
"description": "wujie-vue3 ycode renderer adapter", "description": "wujie-vue3 ycode renderer adapter",
"type": "module", "type": "module",
"scripts": { "scripts": {

View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { AxiosResponse, InternalAxiosRequestConfig } from 'axios'; import type { AxiosInterceptorManager } from 'axios';
import type { Router, RouteRecordRaw } from 'vue-router'; import type { Router, RouteRecordRaw } from 'vue-router';
@ -10,29 +10,16 @@ import WujieVue from 'wujie-vue3';
// @ts-ignore ignore the type error // @ts-ignore ignore the type error
import { version } from '/package.json'; import { version } from '/package.json';
//
interface AxiosInterceptors {
request?: {
onFulfilled?: (
config: InternalAxiosRequestConfig,
) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>;
onRejected?: (error: any) => any;
};
response?: {
onFulfilled?: (
response: AxiosResponse,
) => AxiosResponse | Promise<AxiosResponse>;
onRejected?: (error: any) => any;
};
}
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
[key: string]: any; [key: string]: any;
applicationId: number; applicationId: number;
degrade?: boolean; degrade?: boolean;
fileId: number | string; fileId: number | string;
interceptors?: AxiosInterceptors; interceptors?: {
request?: AxiosInterceptorManager<any>;
response?: AxiosInterceptorManager<any>;
};
name?: string; name?: string;
// payload // payload
payload?: Record<string, any>; payload?: Record<string, any>;
@ -132,5 +119,6 @@ onBeforeUnmount(() => {
:props="subAppProps" :props="subAppProps"
:before-load="beforeLoad" :before-load="beforeLoad"
:after-mount="afterMount" :after-mount="afterMount"
:interceptors="interceptors"
/> />
</template> </template>