ace-front-end 1.0.0

package/ace-monolith-shell-ui/src/http/AceAxios.ts

@@ -0,0 +1,645 @@
+/*
+ * 版权所有 (c) 2023 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+import type {AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios'
+import axios from 'axios'
+
+import {merge} from 'lodash-es'
+import {h} from 'vue'
+import type {
+    AceAxiosCreateConfig,
+    AceAxiosRequestConfig,
+    IAceAxios,
+    LoadingChangedEventListener,
+    UniformResponse,
+    ValidationError
+} from '@jari-ace/app-bolts'
+import {i18n} from '@jari-ace/app-bolts'
+import type {ComposerTranslation} from 'vue-i18n'
+import {ElMessage, ElMessageBox} from 'element-plus'
+import qs from 'qs'
+
+const t = function (message: string): string {
+    if (!(
+        i18n?.global?.t instanceof Function
+    )) {
+        return message
+    }
+    return (
+               i18n?.global?.t as unknown as ComposerTranslation
+           )(message) ?? message
+}
+
+// noinspection JSUnusedGlobalSymbols
+/**
+ * 与鲲舟平台2.0版后端API规范适配的Axios封装类。支持以下特性：
+ * 1. 防止重复请求，请参考{@link AceAxiosRequestConfig}的`cancelDuplicatedRequest`属性
+ * 3. 自动化加载界面提示
+ * 4. 根据后端UniformResponse类型响应，显示提示信息，解包返回真正的data
+ *
+ * @author hucp
+ */
+export class AceAxios implements IAceAxios {
+    private readonly pendingRequests = new Map<string, AbortController>()
+    private loadingCount = 0
+    public loading = false
+    private loadingChangedEventListeners: LoadingChangedEventListener[] = []
+    private readonly axiosInstance: AxiosInstance
+    private static VOID_OBJECT = {}
+    private headerProviders: (() => Record<string, string>)[] = []
+    private requestDataWrappers: ((config: AceAxiosRequestConfig) => void)[] = []
+    private defaultRequestConfig: AceAxiosRequestConfig = {
+        withCredentials: true,
+        cancelDuplicatedRequest: true,
+        showSuccessMessage: false,
+        showApiErrorMessage: true,
+        paramsSerializer: function (params) {
+            return qs.stringify(params, {arrayFormat: 'repeat'})
+        },
+        showUnexpectedErrorDetail: window.appDescriptor.env.isDevMode(),
+        successNotificationParams: {
+            type: 'success',
+            showClose: false,
+            grouping: true
+        },
+        isUniformResponse: true,
+        apiErrorNotificationParams: {
+            type: 'error',
+            showClose: true,
+            grouping: true
+        },
+        unexpectedErrorNotificationParams: {
+            type: 'error',
+            title: '未知异常',
+            showClose: true,
+            showCancelButton: false,
+            showConfirmButton: true,
+            draggable: true
+        }
+    }
+
+    constructor(createConfig: AceAxiosCreateConfig) {
+        this.axiosInstance = axios.create(createConfig)
+        this.setupInterceptors(this.axiosInstance)
+    }
+
+    /**
+     * 生成每个请求的唯一key
+     */
+    private static getPendingKey(config: AceAxiosRequestConfig) {
+        let {data} = config
+        const {url, method, params} = config
+        if (data && typeof data !== 'string') {
+            data = JSON.stringify(data)
+        }
+        return [url, method, JSON.stringify(params), data].join('&')
+    }
+
+    /**
+     * 设置缺省请求配置项，此方法将新配置对象合并入原有配置对象中
+     * @param defaultConfig 新配置对象
+     */
+    public setDefaultRequestConfig(defaultConfig: AceAxiosRequestConfig) {
+        this.defaultRequestConfig = merge(this.defaultRequestConfig, defaultConfig)
+    }
+
+    /**
+     * 添加自动请求头提供者
+     * @param provider 请求头提供者函数
+     */
+    public addHeaderProvider(provider: () => Record<string, string>) {
+        this.headerProviders.push(provider)
+    }
+
+    /**
+     * 添加请求数据封装器
+     * @param encapsulator 数据封装函数
+     */
+    public addRequestDataWrapper(encapsulator: (config: AceAxiosRequestConfig) => void) {
+        this.requestDataWrappers.push(encapsulator)
+    }
+
+    /**
+     * 返回原始response对象的请求
+     */
+    public requestRaw<TResult>(requestConfig: AceAxiosRequestConfig) {
+        requestConfig = this.mergeWithDefault(requestConfig)
+        return this.axiosInstance.request<TResult>(requestConfig)
+    }
+
+    /**
+     * 执行请求
+     * @param requestConfig 请求参数
+     */
+    public request<TResult>(requestConfig: AceAxiosRequestConfig): Promise<TResult> {
+        requestConfig = this.mergeWithDefault(requestConfig)
+        this.loadingCount++
+        this.loading = (
+            this.loadingCount > 0
+        )
+        this.fireLoadingChanged()
+        const wrapped = requestConfig.isUniformResponse
+            ? this.axiosInstance
+                  .request<TResult, AxiosResponse<UniformResponse<TResult>>, any>(requestConfig)
+            : this.axiosInstance
+                  .request<TResult, AxiosResponse<TResult>, any>(requestConfig)
+        return new Promise<TResult>((resolve, reject) => {
+            wrapped
+                .then((response) => {
+                    if (!response) {
+                        resolve(AceAxios.VOID_OBJECT as TResult)
+                    } else if ((
+                        response.data as any
+                    ).aceUni) {
+                        const data = response.data as UniformResponse<TResult>
+                        if (data) {
+                            if (data.data !== undefined) {
+                                resolve(data.data)
+                            } else {
+                                resolve(AceAxios.VOID_OBJECT as TResult)
+                            }
+                        } else {
+                            resolve(AceAxios.VOID_OBJECT as TResult)
+                        }
+                    } else {
+                        const data1 = response.data as TResult
+                        if (data1) {
+                            resolve(data1)
+                        } else {
+                            resolve(AceAxios.VOID_OBJECT as TResult)
+                        }
+                    }
+                })
+                .catch((error) => {
+                    reject(error)
+                })
+                .finally(() => {
+                    this.loadingCount--
+                    this.loading = (
+                        this.loadingCount > 0
+                    )
+                    this.fireLoadingChanged()
+                })
+        })
+    }
+
+    public onLoadingChanged(callback: LoadingChangedEventListener) {
+        this.loadingChangedEventListeners.push(callback)
+    }
+
+    public detachLoadingChangedListener(callback: LoadingChangedEventListener) {
+        const index = this.loadingChangedEventListeners.indexOf(callback)
+        if (index != -1) {
+            this.loadingChangedEventListeners.splice(index, 1)
+        }
+    }
+
+    private fireLoadingChanged() {
+        this.loadingChangedEventListeners.forEach(lsner => {
+            lsner(this.loading)
+        })
+    }
+
+    /**
+     * 中断请求执行
+     * @param requestConfig 请求配置
+     */
+    public cancel(requestConfig: AxiosRequestConfig) {
+        if (!requestConfig) return
+        const controller = this.removePending(requestConfig);
+        if (controller) {
+            controller.abort()
+        }
+    }
+
+    /**
+     * 获取是否正在加载
+     */
+    public isLoading(): boolean {
+        return this.loading
+    }
+
+    /**
+     * 执行Get方法请求
+     * @param url 请求目标路径
+     * @param params 请求query参数
+     * @param requestConfig 请求配置参数
+     */
+    public get<TResult>(url: string, params?: any, requestConfig?: AceAxiosRequestConfig) {
+        requestConfig = merge(requestConfig || {}, {
+            method: 'get',
+            url,
+            params
+        })
+        return this.request<TResult>(requestConfig)
+    }
+
+    /**
+     * 执行Delete方法请求
+     * @param url 请求的目标路径
+     * @param data 请求body
+     * @param params 请求query参数
+     * @param requestConfig 请求配置参数
+     */
+    public delete<TResult>(
+        url: string,
+        data?: any,
+        params?: any,
+        requestConfig?: AceAxiosRequestConfig
+    ) {
+        requestConfig = merge(requestConfig || {}, {
+            method: 'delete',
+            url,
+            data,
+            params
+        })
+        return this.request<TResult>(requestConfig)
+    }
+
+    /**
+     * 执行Post方法请求
+     * @param url 请求的目标路径
+     * @param data 请求body
+     * @param params 请求query参数
+     * @param requestConfig 请求配置参数
+     */
+    public post<TResult>(
+        url: string,
+        data?: any,
+        params?: any,
+        requestConfig?: AceAxiosRequestConfig
+    ) {
+        requestConfig = merge(requestConfig || {}, {
+            method: 'post',
+            url,
+            data,
+            params
+        })
+        return this.request<TResult>(requestConfig)
+    }
+
+    /**
+     * 执行Put方法请求
+     * @param url 请求的目标路径
+     * @param data 请求body
+     * @param params 请求query参数
+     * @param requestConfig 请求配置参数
+     */
+    public put<TResult>(
+        url: string,
+        data?: any,
+        params?: any,
+        requestConfig?: AceAxiosRequestConfig
+    ) {
+        requestConfig = Object.assign(requestConfig || {}, {
+            method: 'put',
+            url,
+            data,
+            params
+        })
+        return this.request<TResult>(requestConfig)
+    }
+
+    /**
+     * 执行Patch方法请求
+     * @param url 请求的目标路径
+     * @param data 请求body
+     * @param params 请求query参数
+     * @param requestConfig 请求配置参数
+     */
+    public patch<TResult>(
+        url: string,
+        data?: any,
+        params?: any,
+        requestConfig?: AceAxiosRequestConfig
+    ) {
+        requestConfig = Object.assign(requestConfig || {}, {
+            method: 'patch',
+            url,
+            data,
+            params
+        })
+        return this.request<TResult>(requestConfig)
+    }
+
+    /**
+     * 执行Post方法请求
+     * @param url 请求的目标路径
+     * @param data 请求body
+     * @param params 请求query参数
+     * @param requestConfig 请求配置参数
+     */
+    public postForm<TResult>(
+        url: string,
+        data?: any,
+        params?: any,
+        requestConfig?: AceAxiosRequestConfig
+    ) {
+        requestConfig = merge(requestConfig || {}, {
+            method: 'post',
+            url,
+            data,
+            params,
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
+        })
+        return this.request<TResult>(requestConfig)
+    }
+
+    /**
+     * 执行Put方法请求
+     * @param url 请求的目标路径
+     * @param data 请求body
+     * @param params 请求query参数
+     * @param requestConfig 请求配置参数
+     */
+    public putForm<TResult>(
+        url: string,
+        data?: any,
+        params?: any,
+        requestConfig?: AceAxiosRequestConfig
+    ) {
+        requestConfig = Object.assign(requestConfig || {}, {
+            method: 'put',
+            url,
+            data,
+            params,
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
+        })
+        return this.request<TResult>(requestConfig)
+    }
+
+    /**
+     * 执行Patch方法请求
+     * @param url 请求的目标路径
+     * @param data 请求body
+     * @param params 请求query参数
+     * @param requestConfig 请求配置参数
+     */
+    public patchForm<TResult>(
+        url: string,
+        data?: any,
+        params?: any,
+        requestConfig?: AceAxiosRequestConfig
+    ) {
+        requestConfig = Object.assign(requestConfig || {}, {
+            method: 'patch',
+            url,
+            data,
+            params,
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            }
+        })
+        return this.request<TResult>(requestConfig)
+    }
+
+    private setupInterceptors(instance: AxiosInstance) {
+        instance.interceptors.request.use(
+            (config) => {
+                this.headerProviders.forEach((provider) => {
+                    const headers = provider()
+                    if (headers) {
+                        if (config.headers && typeof (config.headers as any).set === 'function') {
+                            ;(config.headers as any).set(headers)
+                        } else {
+                            config.headers = Object.assign(config.headers || {}, headers)
+                        }
+                    }
+                })
+                this.requestDataWrappers.forEach((encapsulator) => {
+                    encapsulator(config)
+                })
+                const cfg = config as AceAxiosRequestConfig
+                let controller: AbortController | undefined = undefined;
+                if (cfg.cancelDuplicatedRequest) {
+                    controller = this.removePending(cfg);
+                }
+                this.addPending(config)
+                if (controller) controller.abort();
+                return Promise.resolve(config)
+            },
+            (error) => {
+                if (error.code === 'ERR_CANCELED') {
+                    return Promise.reject(error);
+                }
+                if (error.config) {
+                    const cfg = error.config as AceAxiosRequestConfig
+                    this.removePending(cfg)
+                }
+                const data = this.handleOtherError(error)
+                return Promise.reject(data)
+            }
+        )
+
+        instance.interceptors.response.use(
+            (response) => {
+                const cfg = response.config as AceAxiosRequestConfig
+                this.removePending(cfg)
+                const dataType = typeof response.data;
+                if ((
+                        dataType === 'object' || dataType === 'function'
+                    )
+                    && 'status' in response.data && 'message' in response.data) {
+                    if (response.data.status === 200 && cfg.showSuccessMessage) {
+                        const param = cfg.successNotificationParams
+                        ElMessage(Object.assign(param!, {message: response.data.message}))
+                    }
+                }
+                return response
+            },
+            (error) => {
+                if (error.code === 'ERR_CANCELED') {
+                    return Promise.reject(error);
+                }
+                let data
+                const cfg = error.config as AceAxiosRequestConfig
+                this.removePending(cfg)
+                console.log('axios request: ', cfg, ' error details: ', error)
+                if (error.response && error.response.status == 400 && error.response.data) {
+                    data = this.handleApiError(error)
+                } else if (error.response && error.response.status == 401) {
+                    if (window.rawWindow) {
+                        window.rawWindow.location.href = '/auth/login'
+                    } else {
+                        window.location.href = '/auth/login'
+                    }
+                } else {
+                    data = this.handleOtherError(error)
+                }
+                return Promise.reject(data)
+            }
+        )
+    }
+
+    private handleOtherError(error: any) {
+        let errMessage
+        if (error.response) {
+            const errStatus = error.response.status
+            const messageKey = 'errors.http' + errStatus
+            if (i18n?.global?.te(messageKey) ?? false) {
+                errMessage = t(messageKey)
+            } else {
+                errMessage = `${t('errors.unknown')}(Http ${errStatus})`
+            }
+        } else if (error.message) {
+            if (error.message.indexOf('timeout') >= 0) {
+                errMessage = `${t('errors.requestTimeout')}`
+            } else if (error.message.indexOf('Network Error') >= 0) {
+                errMessage = t('errors.connFailed')
+            } else if (error.message.indexOf('aborted') < 0) {
+                errMessage = `${t('errors.requestError')}${error.message}`
+            }
+        }
+        const cfg = error.config == null
+            ? (
+                error.response == null
+                    ? null
+                    : error.response.config
+            )
+            : error.config
+        if (!errMessage) errMessage = error.message
+        if (errMessage && cfg) {
+            ElMessage(
+                Object.assign(cfg.apiErrorNotificationParams!, {
+                    message: errMessage
+                })
+            )
+        }
+        if (!cfg && errMessage) {
+            ElMessage.error(
+                {
+                    message: errMessage,
+                    showClose: true,
+                    duration: 0,
+                    appendTo: "body",
+                    grouping: true
+                }
+            )
+        }
+        const data: UniformResponse<void> = {
+            message: errMessage,
+            status: 100
+        }
+        return data
+    }
+
+    private handleApiError(error: any) {
+        const data = error.response.data
+        const cfg = error.response.config as AceAxiosRequestConfig
+        const param = cfg.unexpectedErrorNotificationParams
+        if (data.status && data.message) {
+            if (data.error && data.status === 500) {
+                if (cfg.showApiErrorMessage) {
+                    const err = data.error
+                    if (cfg.showUnexpectedErrorDetail) {
+                        ElMessageBox(
+                            Object.assign(param!, {
+                                customStyle: {
+                                    maxWidth: '1000px'
+                                },
+                                message: h('div', null, [
+                                    h('p', null, `${t('errors.unknownApiError')}`),
+                                    h('p', null, err.message),
+                                    h('p', null, `--> ${t('errors.errorClass')}: ${err.exception}`),
+                                    h('p', null, `--> ${t('errors.position')}: ${err.position}`),
+                                    h(
+                                        'p',
+                                        null,
+                                        `--> ${t('errors.rootErrorMsg')}: ${err.rootMessage}`
+                                    ),
+                                    h(
+                                        'p',
+                                        null,
+                                        `--> ${t('errors.rootErrorClass')}: ${err.rootException}`
+                                    ),
+                                    h(
+                                        'p',
+                                        null,
+                                        `--> ${t('errors.rootPosition')}: ${err.rootPosition}`
+                                    ),
+                                    h('p', null, `--> Trace ID: ${err.traceId}`)
+                                ])
+                            })
+                        ).then()
+                    } else {
+                        ElMessageBox(
+                            Object.assign(param!, {
+                                message: h('div', null, [
+                                    h('p', null, `${t('errors.unknownApiError')}`),
+                                    h('p', null, err.message),
+                                    h('p', null, `--> Trace ID: ${err.traceId}`)])
+                            })
+                        ).then()
+                    }
+                }
+            } else if (data.validationErrors) {
+                cfg.validationErrorProcessor &&
+                cfg.validationErrorProcessor(data.validationErrors as ValidationError[], cfg)
+                if (cfg.popValidationErrorNotification && data.validationErrors.length > 0) {
+                    const param = cfg.apiErrorNotificationParams
+                    ElMessage(
+                        Object.assign(param!, {
+                            message: data.validationErrors[0].message
+                        })
+                    )
+                }
+            } else {
+                if (
+                    cfg.showApiErrorMessage &&
+                    (
+                        !cfg.apiErrorProcessor ||
+                        !cfg.apiErrorProcessor(data.status, data.message, cfg)
+                    )
+                ) {
+                    const param = cfg.apiErrorNotificationParams
+                    ElMessage(
+                        Object.assign(param!, {
+                            message: data.message
+                        })
+                    )
+                }
+            }
+        } else {
+            data.status = 500
+            data.message = t('errors.unknownApiError')
+            ElMessageBox(
+                Object.assign(param!, {
+                    message: data.message
+                })
+            ).then()
+        }
+        return data
+    }
+
+    private addPending(config: AceAxiosRequestConfig) {
+        const key = AceAxios.getPendingKey(config)
+        if (config.cancelDuplicatedRequest && !this.pendingRequests.has(key)) {
+            const controller = new AbortController()
+            config.signal = controller.signal
+            this.pendingRequests.set(key, controller)
+        }
+    }
+
+    private removePending(config: AceAxiosRequestConfig) {
+        if (!config) return undefined;
+        const key = AceAxios.getPendingKey(config)
+        if (this.pendingRequests.has(key)) {
+            const controller = this.pendingRequests.get(key)
+            this.pendingRequests.delete(key)
+            return controller;
+        }
+        return undefined;
+    }
+
+    private mergeWithDefault(config: AceAxiosRequestConfig) {
+        const c = merge({...this.defaultRequestConfig}, config);
+        return merge(config, c);
+    }
+}

package/ace-monolith-shell-ui/src/http/cache.ts

@@ -0,0 +1,11 @@
+import { AceAxios } from "./AceAxios";
+
+export const axiosCache = (function () {
+    let cache: Map<string, AceAxios> | null = null;
+    return function () {
+        if (!cache) {
+            cache = new Map<string, AceAxios>();
+        }
+        return cache;
+    };
+})();

package/ace-monolith-shell-ui/src/http/index.ts

@@ -0,0 +1,33 @@
+/*
+ * 版权所有 (c) 2023 江苏杰瑞信息科技有限公司
+ *
+ * 此文件属于JARI.ACE平台项目，修改、分发必须遵守杰瑞信科商业软件许可协议
+ */
+
+import { AceAxios } from './AceAxios'
+import { setupAxios } from '@jari-ace/app-bolts'
+import type { CreateAxiosDefaults } from 'axios'
+import { axiosCache } from './cache'
+
+setupAxios(createAxios, createAxiosWithoutCache)
+
+export function createAxios(createConfig?: CreateAxiosDefaults) {
+    const cache = axiosCache()
+    const key = createConfig ? JSON.stringify(createConfig) : '_'
+    if (cache.has(key)) {
+        return cache.get(key) as AceAxios
+    } else {
+        const axios = createAxiosWithoutCache(createConfig)
+        cache.set(key, axios)
+        return axios
+    }
+}
+
+export function createAxiosWithoutCache(createConfig?: CreateAxiosDefaults) {
+    return new AceAxios({
+        baseURL: window.appDescriptor.env.isDevMode()
+            ? new URL('/ace', location.origin).toString() //开发模式下使用vite代理，添加ace前缀，由vite代理修改路由
+            : new URL('/', location.origin).toString(),
+        ...createConfig
+    })
+}