初始版本提交

src/utils/http/axios/Axios.ts

@@ -0,0 +1,330 @@
+import type { AxiosRequestConfig, AxiosInstance, AxiosResponse, AxiosError } from 'axios';
+import type { RequestOptions, Result, UploadFileParams } from '/#/axios';
+import type { CreateAxiosOptions } from './axiosTransform';
+import axios from 'axios';
+import qs from 'qs';
+import { AxiosCanceler } from './axiosCancel';
+import { isFunction } from '/@/utils/is';
+import { cloneDeep } from 'lodash-es';
+import { ContentTypeEnum } from '/@/enums/httpEnum';
+import { RequestEnum } from '/@/enums/httpEnum';
+import { useUserStore } from '/@/store/modules/user';
+import { router } from '/@/router';
+import { PageEnum } from '/@/enums/pageEnum';
+
+export * from './axiosTransform';
+
+/**
+ * @description:  axios module
+ */
+export class VAxios {
+  private axiosInstance: AxiosInstance;
+  private readonly options: CreateAxiosOptions;
+
+  constructor(options: CreateAxiosOptions) {
+    this.options = options;
+    this.axiosInstance = axios.create(options);
+    this.setupInterceptors();
+  }
+
+  /**
+   * @description:  Create axios instance
+   */
+  private createAxios(config: CreateAxiosOptions): void {
+    this.axiosInstance = axios.create(config);
+  }
+
+  private getTransform() {
+    const { transform } = this.options;
+    return transform;
+  }
+
+  getAxios(): AxiosInstance {
+    return this.axiosInstance;
+  }
+
+  /**
+   * @description: Reconfigure axios
+   */
+  configAxios(config: CreateAxiosOptions) {
+    if (!this.axiosInstance) {
+      return;
+    }
+    this.createAxios(config);
+  }
+
+  /**
+   * @description: Set general header
+   */
+  setHeader(headers: any): void {
+    if (!this.axiosInstance) {
+      return;
+    }
+    Object.assign(this.axiosInstance.defaults.headers, headers);
+  }
+
+  /**
+   * @description: Interceptor configuration
+   */
+  private setupInterceptors() {
+    const transform = this.getTransform();
+    if (!transform) {
+      return;
+    }
+    const {
+      requestInterceptors,
+      requestInterceptorsCatch,
+      responseInterceptors,
+      responseInterceptorsCatch,
+    } = transform;
+
+    const axiosCanceler = new AxiosCanceler();
+
+    // Request interceptor configuration processing
+    this.axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
+      // If cancel repeat request is turned on, then cancel repeat request is prohibited
+      // @ts-ignore
+      const { ignoreCancelToken } = config.requestOptions;
+      const ignoreCancel =
+        ignoreCancelToken !== undefined
+          ? ignoreCancelToken
+          : this.options.requestOptions?.ignoreCancelToken;
+
+      !ignoreCancel && axiosCanceler.addPending(config);
+      if (requestInterceptors && isFunction(requestInterceptors)) {
+        config = requestInterceptors(config, this.options);
+      }
+      return config;
+    }, undefined);
+
+    // Request interceptor error capture
+    requestInterceptorsCatch &&
+      isFunction(requestInterceptorsCatch) &&
+      this.axiosInstance.interceptors.request.use(undefined, requestInterceptorsCatch);
+
+    // Response result interceptor processing
+    this.axiosInstance.interceptors.response.use((res: AxiosResponse<any>) => {
+      res && axiosCanceler.removePending(res.config);
+      if (responseInterceptors && isFunction(responseInterceptors)) {
+        res = responseInterceptors(res);
+      }
+      return res;
+    }, undefined);
+
+    // Response result interceptor error capture
+    responseInterceptorsCatch &&
+      isFunction(responseInterceptorsCatch) &&
+      this.axiosInstance.interceptors.response.use(undefined, (error) => {
+        // @ts-ignore
+        return responseInterceptorsCatch(this.axiosInstance, error);
+      });
+  }
+
+  /**
+   * @description:  File Upload
+   */
+  uploadFile<T = any>(config: AxiosRequestConfig, params: UploadFileParams) {
+    const formData = new window.FormData();
+    const customFilename = params.name || 'file';
+
+    if (params.filename) {
+      if (params.file instanceof Array) {
+        for (const f of params.file as File[]) {
+          formData.append(customFilename, f, params.filename);
+        }
+      } else {
+        formData.append(customFilename, params.file, params.filename);
+      }
+    } else {
+      if (params.file instanceof Array) {
+        for (const f of params.file as File[]) {
+          formData.append(customFilename, f);
+        }
+      } else {
+        formData.append(customFilename, params.file);
+      }
+    }
+
+    if (params.data) {
+      Object.keys(params.data).forEach((key) => {
+        const value = params.data![key];
+        if (Array.isArray(value)) {
+          value.forEach((item) => {
+            formData.append(`${key}[]`, item);
+          });
+          return;
+        }
+
+        formData.append(key, params.data![key]);
+      });
+    }
+
+    return this.request<T>({
+      ...config,
+      method: 'POST',
+      data: formData,
+      transformRequest: [
+        function () {
+          return formData;
+        },
+      ],
+      headers: {
+        'Content-type': ContentTypeEnum.FORM_DATA,
+        // @ts-ignore
+        ignoreCancelToken: true,
+      },
+    });
+  }
+
+  // support form-data
+  supportFormData(config: AxiosRequestConfig) {
+    const headers = config.headers || this.options.headers;
+    const contentType = headers?.['Content-Type'] || headers?.['content-type'];
+
+    if (
+      contentType !== ContentTypeEnum.FORM_URLENCODED ||
+      !Reflect.has(config, 'data') ||
+      config.method?.toUpperCase() === RequestEnum.GET
+    ) {
+      return config;
+    }
+
+    return {
+      ...config,
+      data: qs.stringify(config.data, { arrayFormat: 'brackets' }),
+    };
+  }
+
+  get<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'GET' }, options);
+  }
+
+  post<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'POST' }, options);
+  }
+
+  put<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'PUT' }, options);
+  }
+
+  delete<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    return this.request({ ...config, method: 'DELETE' }, options);
+  }
+  download<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    let conf: CreateAxiosOptions = cloneDeep(config);
+    const transform = this.getTransform();
+
+    const { requestOptions } = this.options;
+
+    const opt: RequestOptions = Object.assign({}, requestOptions, options);
+
+    const { beforeRequestHook, requestCatchHook } = transform || {};
+    if (beforeRequestHook && isFunction(beforeRequestHook)) {
+      conf = beforeRequestHook(conf, opt);
+    }
+    conf.requestOptions = opt;
+
+    conf = this.supportFormData(conf);
+
+    return new Promise((resolve, reject) => {
+      this.axiosInstance
+        .request<any, AxiosResponse<Result>>(conf)
+        .then((res: AxiosResponse<Result>) => {
+          resolve(res as unknown as Promise<T>);
+        })
+        .catch((e: Error | AxiosError) => {
+          if (requestCatchHook && isFunction(requestCatchHook)) {
+            reject(requestCatchHook(e, opt));
+            return;
+          }
+          if (axios.isAxiosError(e)) {
+            // rewrite error message from axios in here
+          }
+          reject(e);
+        });
+    });
+  }
+  desktopApi<T = any>(url, method, options?: RequestOptions): Promise<T> {
+    let conf: CreateAxiosOptions = cloneDeep({ url, method });
+    const transform = this.getTransform();
+
+    const { requestOptions } = this.options;
+
+    const opt: RequestOptions = Object.assign({}, requestOptions, options);
+
+    const { beforeRequestHook, requestCatchHook } = transform || {};
+    if (beforeRequestHook && isFunction(beforeRequestHook)) {
+      conf = beforeRequestHook(conf, opt);
+    }
+    conf.requestOptions = opt;
+
+    conf = this.supportFormData(conf);
+
+    return new Promise((resolve, reject) => {
+      this.axiosInstance
+        .request<any, AxiosResponse<Result>>(conf)
+        .then((res: AxiosResponse<Result>) => {
+          resolve(res.data.data as unknown as Promise<T>);
+        })
+        .catch((e: Error | AxiosError) => {
+          if (requestCatchHook && isFunction(requestCatchHook)) {
+            reject(requestCatchHook(e, opt));
+            return;
+          }
+          if (axios.isAxiosError(e)) {
+            // rewrite error message from axios in here
+          }
+          reject(e);
+        });
+    });
+  }
+  request<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
+    let conf: CreateAxiosOptions = cloneDeep(config);
+    const transform = this.getTransform();
+
+    const { requestOptions } = this.options;
+
+    const opt: RequestOptions = Object.assign({}, requestOptions, options);
+
+    const { beforeRequestHook, requestCatchHook, transformRequestHook } = transform || {};
+    if (beforeRequestHook && isFunction(beforeRequestHook)) {
+      conf = beforeRequestHook(conf, opt);
+    }
+    conf.requestOptions = opt;
+
+    conf = this.supportFormData(conf);
+    return new Promise((resolve, reject) => {
+      this.axiosInstance
+        .request<any, AxiosResponse<Result>>(conf)
+        .then((res: AxiosResponse<Result>) => {
+          if (transformRequestHook && isFunction(transformRequestHook)) {
+            try {
+              const ret = transformRequestHook(res, opt);
+              resolve(ret);
+            } catch (err) {
+              reject(err || new Error('request error!'));
+            }
+            return;
+          }
+          resolve(res as unknown as Promise<T>);
+        })
+        .catch((e: Error | AxiosError) => {
+          if (e.message.includes('timeout') || e.message.includes('Network Error')) {
+            const userStore = useUserStore();
+            userStore.setToken(undefined);
+            userStore.setSessionTimeout(false);
+            userStore.setUserInfo(null);
+            router.push(PageEnum.BASE_LOGIN);
+          }
+          if (requestCatchHook && isFunction(requestCatchHook)) {
+            reject(requestCatchHook(e, opt));
+            return;
+          }
+          if (axios.isAxiosError(e)) {
+            // rewrite error message from axios in here
+          }
+          reject(e);
+        });
+    });
+  }
+}

src/utils/http/axios/axiosCancel.ts

@@ -0,0 +1,60 @@
+import type { AxiosRequestConfig, Canceler } from 'axios';
+import axios from 'axios';
+import { isFunction } from '/@/utils/is';
+
+// Used to store the identification and cancellation function of each request
+let pendingMap = new Map<string, Canceler>();
+
+export const getPendingUrl = (config: AxiosRequestConfig) => [config.method, config.url].join('&');
+
+export class AxiosCanceler {
+  /**
+   * Add request
+   * @param {Object} config
+   */
+  addPending(config: AxiosRequestConfig) {
+    this.removePending(config);
+    const url = getPendingUrl(config);
+    config.cancelToken =
+      config.cancelToken ||
+      new axios.CancelToken((cancel) => {
+        if (!pendingMap.has(url)) {
+          // If there is no current request in pending, add it
+          pendingMap.set(url, cancel);
+        }
+      });
+  }
+
+  /**
+   * @description: Clear all pending
+   */
+  removeAllPending() {
+    pendingMap.forEach((cancel) => {
+      cancel && isFunction(cancel) && cancel();
+    });
+    pendingMap.clear();
+  }
+
+  /**
+   * Removal request
+   * @param {Object} config
+   */
+  removePending(config: AxiosRequestConfig) {
+    const url = getPendingUrl(config);
+
+    if (pendingMap.has(url)) {
+      // If there is a current request identifier in pending,
+      // the current request needs to be cancelled and removed
+      const cancel = pendingMap.get(url);
+      cancel && cancel(url);
+      pendingMap.delete(url);
+    }
+  }
+
+  /**
+   * @description: reset
+   */
+  reset(): void {
+    pendingMap = new Map<string, Canceler>();
+  }
+}

src/utils/http/axios/axiosRetry.ts

@@ -0,0 +1,28 @@
+import { AxiosError, AxiosInstance } from 'axios';
+/**
+ *  请求重试机制
+ */
+
+export class AxiosRetry {
+  /**
+   * 重试
+   */
+  retry(AxiosInstance: AxiosInstance, error: AxiosError) {
+    // @ts-ignore
+    const { config } = error.response;
+    const { waitTime, count } = config?.requestOptions?.retryRequest;
+    config.__retryCount = config.__retryCount || 0;
+    if (config.__retryCount >= count) {
+      return Promise.reject(error);
+    }
+    config.__retryCount += 1;
+    return this.delay(waitTime).then(() => AxiosInstance(config));
+  }
+
+  /**
+   * 延迟
+   */
+  private delay(waitTime: number) {
+    return new Promise((resolve) => setTimeout(resolve, waitTime));
+  }
+}

src/utils/http/axios/axiosTransform.ts

@@ -0,0 +1,52 @@
+/**
+ * Data processing class, can be configured according to the project
+ */
+import type { AxiosRequestConfig, AxiosResponse } from 'axios';
+import type { RequestOptions, Result } from '/#/axios';
+
+export interface CreateAxiosOptions extends AxiosRequestConfig {
+  authenticationScheme?: string;
+  transform?: AxiosTransform;
+  requestOptions?: RequestOptions;
+}
+
+export abstract class AxiosTransform {
+  /**
+   * @description: Process configuration before request
+   * @description: Process configuration before request
+   */
+  beforeRequestHook?: (config: AxiosRequestConfig, options: RequestOptions) => AxiosRequestConfig;
+
+  /**
+   * @description: Request successfully processed
+   */
+  transformRequestHook?: (res: AxiosResponse<Result>, options: RequestOptions) => any;
+
+  /**
+   * @description: 请求失败处理
+   */
+  requestCatchHook?: (e: Error, options: RequestOptions) => Promise<any>;
+
+  /**
+   * @description: 请求之前的拦截器
+   */
+  requestInterceptors?: (
+    config: AxiosRequestConfig,
+    options: CreateAxiosOptions,
+  ) => AxiosRequestConfig;
+
+  /**
+   * @description: 请求之后的拦截器
+   */
+  responseInterceptors?: (res: AxiosResponse<any>) => AxiosResponse<any>;
+
+  /**
+   * @description: 请求之前的拦截器错误处理
+   */
+  requestInterceptorsCatch?: (error: Error) => void;
+
+  /**
+   * @description: 请求之后的拦截器错误处理
+   */
+  responseInterceptorsCatch?: (axiosInstance: AxiosResponse, error: Error) => void;
+}

src/utils/http/axios/checkStatus.ts

@@ -0,0 +1,80 @@
+import type { ErrorMessageMode } from '/#/axios';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useI18n } from '/@/hooks/web/useI18n';
+// import router from '/@/router';
+// import { PageEnum } from '/@/enums/pageEnum';
+import { useUserStoreWithOut } from '/@/store/modules/user';
+import projectSetting from '/@/settings/projectSetting';
+import { SessionTimeoutProcessingEnum } from '/@/enums/appEnum';
+
+const { createMessage, createErrorModal } = useMessage();
+const error = createMessage.error!;
+const stp = projectSetting.sessionTimeoutProcessing;
+
+export function checkStatus(
+  status: number,
+  msg: string,
+  errorMessageMode: ErrorMessageMode = 'message',
+): void {
+  const { t } = useI18n();
+  const userStore = useUserStoreWithOut();
+  let errMessage = '';
+
+  switch (status) {
+    case 400:
+      errMessage = `${msg}`;
+      break;
+    // 401: Not logged in
+    // Jump to the login page if not logged in, and carry the path of the current page
+    // Return to the current page after successful login. This step needs to be operated on the login page.
+    case 401:
+      userStore.setToken(undefined);
+      errMessage = msg || t('用户没有权限（令牌、用户名、密码错误）!');
+      if (stp === SessionTimeoutProcessingEnum.PAGE_COVERAGE) {
+        userStore.setSessionTimeout(true);
+      } else {
+        userStore.logout(true);
+      }
+      break;
+    case 403:
+      errMessage = t('用户得到授权，但是访问是被禁止的！');
+      break;
+    // 404请求不存在
+    case 404:
+      errMessage = t('网络请求错误,未找到该资源！');
+      break;
+    case 405:
+      errMessage = t('网络请求错误,请求方法未允许!');
+      break;
+    case 408:
+      errMessage = t('网络请求超时!');
+      break;
+    case 500:
+      errMessage = t('服务器错误,请联系管理员!');
+      break;
+    case 501:
+      errMessage = t('网络未实现!');
+      break;
+    case 502:
+      errMessage = t('网络错误!');
+      break;
+    case 503:
+      errMessage = t('服务不可用，服务器暂时过载或维护!');
+      break;
+    case 504:
+      errMessage = t('网络超时!');
+      break;
+    case 505:
+      errMessage = t('http版本不支持该请求!');
+      break;
+    default:
+  }
+
+  if (errMessage) {
+    if (errorMessageMode === 'modal') {
+      createErrorModal({ title: t('错误提示'), content: errMessage });
+    } else if (errorMessageMode === 'message') {
+      error({ content: errMessage, key: `global_error_message_status_${status}` });
+    }
+  }
+}

src/utils/http/axios/helper.ts

@@ -0,0 +1,48 @@
+import { isObject, isString } from '/@/utils/is';
+
+const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+
+export function joinTimestamp<T extends boolean>(
+  join: boolean,
+  restful: T,
+): T extends true ? string : object;
+
+export function joinTimestamp(join: boolean, restful = false): string | object {
+  if (!join) {
+    return restful ? '' : {};
+  }
+  const now = new Date().getTime();
+  if (restful) {
+    return `?_t=${now}`;
+  }
+  return { _t: now };
+}
+
+/**
+ * @description: Format request parameter time
+ */
+export function formatRequestDate(params: Recordable) {
+  if (Object.prototype.toString.call(params) !== '[object Object]') {
+    return;
+  }
+
+  for (const key in params) {
+    const format = params[key]?.format ?? null;
+    if (format && typeof format === 'function') {
+      params[key] = params[key].format(DATE_TIME_FORMAT);
+    }
+    if (isString(key)) {
+      const value = params[key];
+      if (value) {
+        try {
+          params[key] = isString(value) ? value.trim() : value;
+        } catch (error: any) {
+          throw new Error(error);
+        }
+      }
+    }
+    if (isObject(params[key])) {
+      formatRequestDate(params[key]);
+    }
+  }
+}

src/utils/http/axios/index.ts

@@ -0,0 +1,270 @@
+// axios配置  可自行根据项目进行更改，只需更改该文件即可，其他文件可以不动
+// The axios configuration can be changed according to the project, just change the file, other files can be left unchanged
+
+import type { AxiosResponse } from 'axios';
+import { clone, isBoolean } from 'lodash-es';
+import type { RequestOptions, Result } from '/#/axios';
+import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform';
+import { VAxios } from './Axios';
+import { checkStatus } from './checkStatus';
+import { useGlobSetting } from '/@/hooks/setting';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { RequestEnum, ResultEnum, ContentTypeEnum } from '/@/enums/httpEnum';
+import { isString } from '/@/utils/is';
+import { getToken } from '/@/utils/auth';
+import { setObjToUrlParams, deepMerge } from '/@/utils';
+import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { joinTimestamp, formatRequestDate } from './helper';
+import { useUserStoreWithOut } from '/@/store/modules/user';
+import { AxiosRetry } from '/@/utils/http/axios/axiosRetry';
+import { useGo } from '/@/hooks/web/usePage';
+import { validateScript } from '/@/utils/event/design';
+
+const globSetting = useGlobSetting();
+const urlPrefix = globSetting.urlPrefix;
+const { createMessage, createErrorModal } = useMessage();
+
+/**
+ * @description: 数据处理，方便区分多种处理方式
+ */
+const transform: AxiosTransform = {
+  /**
+   * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
+   */
+  transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
+    const { t } = useI18n();
+    const { isTransformResponse, isReturnNativeResponse } = options;
+    // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+    if (isReturnNativeResponse) {
+      return res;
+    }
+    // 不进行任何处理，直接返回
+    // 用于页面代码可能需要直接获取code，data，message这些信息时开启
+    if (!isTransformResponse) {
+      return res.data;
+    }
+    // 错误的时候返回
+
+    const { data: result } = res;
+    if (!result) {
+      // return '[HTTP] Request has no return value';
+      throw new Error(t('请求出错，请稍候重试'));
+    }
+    //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
+    const { code, data, msg } = result;
+
+    // 这里逻辑可以根据项目进行修改
+    const hasSuccess = code === ResultEnum.SUCCESS;
+    if (hasSuccess) {
+      return data;
+    }
+
+    // 在此处根据自己项目的实际情况对不同的code执行不同的操作
+    // 如果不希望中断当前请求，请return数据，否则直接抛出异常即可
+    let timeoutMsg = '';
+    switch (code) {
+      case ResultEnum.UNAUTHRAZATION:
+        timeoutMsg = t('登录超时,请重新登录!');
+        const userStore = useUserStoreWithOut();
+        userStore.setToken(undefined);
+        userStore.logout(true);
+        const go = useGo();
+        go('/login');
+        break;
+      default:
+        if (msg) {
+          timeoutMsg = msg;
+        }
+    }
+
+    // errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
+    // errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示
+    if (options.errorMessageMode === 'modal') {
+      createErrorModal({ title: t('错误提示'), content: timeoutMsg });
+    } else if (options.errorMessageMode === 'message') {
+      createMessage.error(timeoutMsg);
+    }
+
+    throw new Error(timeoutMsg || t('请求出错，请稍候重试'));
+  },
+
+  // 请求之前处理config
+  beforeRequestHook: (config, options) => {
+    const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options;
+
+    if (joinPrefix) {
+      config.url = `${urlPrefix}${config.url}`;
+    }
+
+    if (apiUrl && isString(apiUrl)) {
+      config.url = `${apiUrl}${config.url}`;
+    }
+    const params = config.params || {};
+    const data = config.data || false;
+    formatDate && data && !isString(data) && formatRequestDate(data);
+    if (config.method?.toUpperCase() === RequestEnum.GET) {
+      if (!isString(params)) {
+        // 给 get 请求加上时间戳参数，避免从缓存中拿数据。
+        config.params = Object.assign(params || {}, joinTimestamp(joinTime, false));
+      } else {
+        validateScript(params);
+        // 兼容restful风格
+        config.url = config.url + params + `${joinTimestamp(joinTime, true)}`;
+        config.params = undefined;
+      }
+    } else {
+      if (!isString(params)) {
+        formatDate && formatRequestDate(params);
+        if (Reflect.has(config, 'data') && config.data && Object.keys(config.data).length > 0) {
+          config.data = data;
+          config.params = params;
+        } else {
+          // 非GET请求如果没有提供data，则将params视为data
+          config.data = params;
+          config.params = undefined;
+        }
+        if (isBoolean(joinParamsToUrl) && joinParamsToUrl) {
+          config.url = setObjToUrlParams(
+            config.url as string,
+            Object.assign({}, config.params, config.data),
+          );
+        }
+      } else {
+        // 兼容restful风格
+        config.url = config.url + params;
+        config.params = undefined;
+      }
+    }
+    return config;
+  },
+
+  /**
+   * @description: 请求拦截器处理
+   */
+  requestInterceptors: (config, options) => {
+    // 请求之前处理config
+    const token = getToken();
+    if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
+      // jwt token
+      (config as Recordable).headers.Authorization = options.authenticationScheme
+        ? `${options.authenticationScheme} ${token}`
+        : token;
+    }
+    return config;
+  },
+
+  /**
+   * @description: 响应拦截器处理
+   */
+  responseInterceptors: (res: AxiosResponse<any>) => {
+    return res;
+  },
+
+  /**
+   * @description: 响应错误处理
+   */
+  responseInterceptorsCatch: (axiosInstance: 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('接口请求超时,请刷新页面重试!');
+      }
+      if (err?.includes('Network Error')) {
+        errMessage = t('网络异常，请检查您的网络连接是否正常!');
+      }
+
+      if (errMessage) {
+        if (errorMessageMode === 'modal') {
+          createErrorModal({ title: t('错误提示'), 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);
+
+    // 添加自动重试机制 保险起见 只针对GET请求
+    const retryRequest = new AxiosRetry();
+    const { isOpenRetry } = config.requestOptions?.retryRequest;
+    config.method?.toUpperCase() === RequestEnum.GET &&
+      isOpenRetry &&
+      // @ts-ignore
+      retryRequest.retry(axiosInstance, error);
+    return Promise.reject(error);
+  },
+};
+
+function createAxios(opt?: Partial<CreateAxiosOptions>) {
+  return new VAxios(
+    deepMerge(
+      {
+        // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
+        // authentication schemes，e.g: Bearer
+        // authenticationScheme: 'Bearer',
+        authenticationScheme: 'Bearer',
+        timeout: 10 * 1000,
+        // 基础接口地址
+        // baseURL: globSetting.apiUrl,
+
+        headers: { 'Content-Type': ContentTypeEnum.JSON },
+        // 如果是form-data格式
+        // headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
+        // 数据处理方式
+        transform: clone(transform),
+        // 配置项，下面的选项都可以在独立的接口请求中覆盖
+        requestOptions: {
+          // 默认将prefix 添加到url
+          joinPrefix: true,
+          // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+          isReturnNativeResponse: false,
+          // 需要对返回数据进行处理
+          isTransformResponse: true,
+          // post请求的时候添加参数到url
+          joinParamsToUrl: false,
+          // 格式化提交参数时间
+          formatDate: true,
+          // 消息提示类型
+          errorMessageMode: 'message',
+          // 接口地址
+          apiUrl: globSetting.apiUrl,
+          // 接口拼接地址
+          urlPrefix: urlPrefix,
+          //  是否加入时间戳
+          joinTime: true,
+          // 忽略重复请求
+          ignoreCancelToken: true,
+          // 是否携带token
+          withToken: true,
+          retryRequest: {
+            isOpenRetry: false,
+            count: 5,
+            waitTime: 100,
+          },
+        },
+      },
+      opt || {},
+    ),
+  );
+}
+export const defHttp = createAxios();
+
+// other api url
+// export const otherHttp = createAxios({
+//   requestOptions: {
+//     apiUrl: 'xxx',
+//     urlPrefix: 'xxx',
+//   },
+// });