import type { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse, InternalAxiosRequestConfig, } from 'axios'; import axios from 'axios'; import cloneDeep from 'lodash/cloneDeep'; import debounce from 'lodash/debounce'; import isFunction from 'lodash/isFunction'; import throttle from 'lodash/throttle'; import { stringify } from 'qs'; import { ContentTypeEnum } from '@/constants'; import type { AxiosRequestConfigRetry, RequestOptions, Result } from '@/types/axios'; import { AxiosCanceler } from './AxiosCancel'; import type { CreateAxiosOptions } from './AxiosTransform'; function localizeApiError(code: string | undefined, detail: string | undefined, status?: number): string { const messages: Record = { DATABASE_CONNECTION_FAILED: '数据库连接失败,请检查地址、端口、库名和账号权限', DATABASE_INITIALIZATION_FAILED: '数据库初始化失败,请确认使用专用空库并检查迁移权限', DATABASE_ENGINE_NOT_SUPPORTED: '当前版本仅支持 MySQL 8.4', MYSQL_VERSION_UNSUPPORTED: 'MySQL 版本不受支持,需要 MySQL 8.4.x', DATABASE_COLLATION_PREPARATION_FAILED: '数据库字符集或排序规则准备失败', DATABASE_MIGRATION_STATE_INVALID: '数据库迁移历史无效,请使用空库或先修复迁移状态', DATABASE_SCHEMA_INSPECTION_FAILED: '数据库结构检查失败', SETUP_CODE_INVALID: '安装码不正确', SETUP_LOCKED: '安装向导已锁定', SETUP_STATE_WRITE_FAILED: '安装状态文件写入失败,请检查应用目录权限', ADMIN_PASSWORD_MISMATCH: '管理员密码确认不一致', }; if (code && messages[code]) return messages[code]; if (detail && /[\u4E00-\u9FFF]/.test(detail)) return detail; if (status === 401) return '登录会话已失效'; if (status === 403) return '当前账号没有执行此操作的权限'; if (status === 404) return '请求的资源不存在'; if (status === 409) return '数据已发生变化,请刷新后重试'; if (status === 422) return '提交的数据未通过校验'; if (status && status >= 500) return '服务器处理失败,请查看服务日志'; return '网络请求失败,请检查网络连接后重试'; } /** * Axios 模块 */ export class VAxios { /** * Axios实例句柄 * @private */ private instance: AxiosInstance; /** * Axios配置 * @private */ private readonly options: CreateAxiosOptions; /** * 节流/防抖包装后的请求函数 * @private */ private throttledRequest: ((config: AxiosRequestConfigRetry, options?: RequestOptions) => void) | null = null; /** * 待resolve的请求回调队列 * @private */ private pendingResolvers: { resolve: (value: any) => void; }[] = []; constructor(options: CreateAxiosOptions) { this.options = options; this.instance = axios.create(options); this.setupInterceptors(); this.setupThrottleDebounce(); } /** * 创建Axios实例 * @param config * @private */ private createAxios(config: CreateAxiosOptions): void { this.instance = axios.create(config); } /** * 获取数据处理类 * @private */ private getTransform() { const { transform } = this.options; return transform; } /** * 获取Axios实例 */ getAxios(): AxiosInstance { return this.instance; } /** * 配置Axios * @param config */ configAxios(config: CreateAxiosOptions) { if (!this.instance) return; this.createAxios(config); } /** * 设置公共头部信息 * @param headers */ setHeader(headers: Record): void { if (!this.instance) return; Object.assign(this.instance.defaults.headers, headers); } /** * 设置拦截器 * @private */ private setupInterceptors() { const transform = this.getTransform(); if (!transform) return; const { requestInterceptors, requestInterceptorsCatch, responseInterceptors, responseInterceptorsCatch } = transform; const axiosCanceler = new AxiosCanceler(); // 请求拦截器 this.instance.interceptors.request.use(async (config: InternalAxiosRequestConfig) => { // 如果忽略取消令牌,则不会取消重复的请求 // @ts-expect-error 请求参数通过嵌套赋值 const { ignoreCancelToken } = config.requestOptions; const ignoreCancel = ignoreCancelToken ?? this.options.requestOptions?.ignoreCancelToken; if (!ignoreCancel) axiosCanceler.addPending(config); if (requestInterceptors && isFunction(requestInterceptors)) { config = (await requestInterceptors(config, this.options)) as InternalAxiosRequestConfig; } return config; }, undefined); // 请求错误处理 if (requestInterceptorsCatch && isFunction(requestInterceptorsCatch)) { this.instance.interceptors.request.use(undefined, requestInterceptorsCatch); } // 响应结果处理 this.instance.interceptors.response.use((res: AxiosResponse) => { if (res) axiosCanceler.removePending(res.config); if (responseInterceptors && isFunction(responseInterceptors)) { res = responseInterceptors(res); } return res; }, undefined); // 响应错误处理 if (responseInterceptorsCatch && isFunction(responseInterceptorsCatch)) { this.instance.interceptors.response.use(undefined, (error) => responseInterceptorsCatch(error, this.instance)); } } /** * 支持 FormData 请求格式 * @param config */ supportFormData(config: AxiosRequestConfig) { const headers = config.headers || (this.options.headers as AxiosRequestHeaders); const contentType = headers?.['Content-Type'] || headers?.['content-type']; if ( contentType !== ContentTypeEnum.FormURLEncoded || !Reflect.has(config, 'data') || config.method?.toUpperCase() === 'GET' ) { return config; } return { ...config, data: stringify(config.data, { arrayFormat: 'brackets' }), }; } /** * 支持 params 序列化 * @param config */ supportParamsStringify(config: AxiosRequestConfig) { const headers = config.headers || this.options.headers; const contentType = headers?.['Content-Type'] || headers?.['content-type']; if (contentType === ContentTypeEnum.FormURLEncoded || !Reflect.has(config, 'params')) { return config; } return { ...config, paramsSerializer: (params: any) => stringify(params, { arrayFormat: 'brackets' }), }; } get(config: AxiosRequestConfig, options?: RequestOptions): Promise { return this.request({ ...config, method: 'GET' }, options); } post(config: AxiosRequestConfig, options?: RequestOptions): Promise { return this.request({ ...config, method: 'POST' }, options); } put(config: AxiosRequestConfig, options?: RequestOptions): Promise { return this.request({ ...config, method: 'PUT' }, options); } delete(config: AxiosRequestConfig, options?: RequestOptions): Promise { return this.request({ ...config, method: 'DELETE' }, options); } patch(config: AxiosRequestConfig, options?: RequestOptions): Promise { return this.request({ ...config, method: 'PATCH' }, options); } /** * 上传文件封装 * @param key 文件所属的key * @param file 文件 * @param config 请求配置 * @param options */ upload(key: string, file: File, config: AxiosRequestConfig, options?: RequestOptions): Promise { const params: FormData = config.params ?? new FormData(); params.append(key, file); return this.request( { ...config, method: 'POST', headers: { 'Content-Type': ContentTypeEnum.FormData, }, params, }, options, ); } /** * 初始化节流/防抖 * @private */ private setupThrottleDebounce() { const { requestOptions } = this.options; if (requestOptions?.throttle?.delay) { this.throttledRequest = throttle((config: AxiosRequestConfigRetry, options?: RequestOptions) => { const resolver = this.pendingResolvers.shift(); resolver?.resolve(this.synthesisRequest(config, options)); }, requestOptions.throttle.delay); } else if (requestOptions?.debounce?.delay) { this.throttledRequest = debounce((config: AxiosRequestConfigRetry, options?: RequestOptions) => { const resolver = this.pendingResolvers.shift(); resolver?.resolve(this.synthesisRequest(config, options)); }, requestOptions.debounce.delay); } } /** * 请求封装 * @param config * @param options */ request(config: AxiosRequestConfigRetry, options?: RequestOptions): Promise { const { requestOptions } = this.options; if (requestOptions?.throttle !== undefined && requestOptions?.debounce !== undefined) { throw new Error('throttle and debounce cannot be set at the same time'); } if (this.throttledRequest) { return new Promise((resolve) => { this.pendingResolvers.push({ resolve }); this.throttledRequest!(config, options); }); } return this.synthesisRequest(config, options); } /** * 请求方法 * @private */ private async synthesisRequest(config: AxiosRequestConfigRetry, options?: RequestOptions): Promise { let conf: CreateAxiosOptions = cloneDeep(config); const transform = this.getTransform(); const { requestOptions } = this.options; const opt: RequestOptions = { ...requestOptions, ...options }; const { beforeRequestHook, requestCatchHook, transformRequestHook } = transform || {}; if (beforeRequestHook && isFunction(beforeRequestHook)) { conf = beforeRequestHook(conf, opt); } conf.requestOptions = opt; conf = this.supportFormData(conf); // 支持params数组参数格式化,因axios默认的toFormData即为brackets方式,无需配置paramsSerializer为qs,有需要可解除注释,参数参考qs文档 // conf = this.supportParamsStringify(conf); return new Promise((resolve, reject) => { this.instance .request>(!config.retryCount ? conf : config) .then((res: AxiosResponse) => { if (transformRequestHook && isFunction(transformRequestHook)) { try { const ret = transformRequestHook(res, opt); resolve(ret); } catch (err) { reject(err || new Error('请求错误!')); } return; } resolve(res as unknown as Promise); }) .catch((e: Error | AxiosError) => { if (requestCatchHook && isFunction(requestCatchHook)) { reject(requestCatchHook(e, opt)); return; } if (axios.isAxiosError(e)) { const problem = e.response?.data as { code?: string; detail?: string; requestId?: string; fieldErrors?: Record } | undefined; const requestId = problem?.requestId || e.response?.headers?.['x-request-id']; const message = localizeApiError(problem?.code, problem?.detail, e.response?.status); const error = new Error(requestId ? `${message}(请求编号:${requestId})` : message); Object.assign(error, { code: problem?.code, status: e.response?.status, requestId, fieldErrors: problem?.fieldErrors, transportFailure: !e.response, }); if (e.response?.status === 401 && window.location.pathname !== '/login') { window.dispatchEvent(new CustomEvent('kaidi:session-expired')); } reject(error); return; } reject(e); }); }); } }