fix: 调整网络错误的提示形式，出现网络超时不再踢出登录

fix: 修复当key为数字类型时，联想弹层第一次选择显示title失败的bug
2024-03-20 15:02:42 +08:00
parent 8cb2bcc9ad
commit 756e92f00d
4 changed files with 434 additions and 416 deletions
--- a/src/components/Designer/src/types/index.ts
+++ b/src/components/Designer/src/types/index.ts
@ -121,6 +121,9 @@ export const basicComponents = [
        typeName: t('计数组件'),
        type: 'number',
        options: {
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
            width: '100%',
            span: '',
            defaultValue: 0,
@ -1165,6 +1168,9 @@ export const infoComponents = [
        typeName: t('人员选择'),
        type: 'user',
        options: {
+            labelWidthMode: 'fix',
+            labelFixWidth: 120,
+            responsive: false,
            span: '',
            width: '100%',
            defaultValue: '',
--- a/src/components/MultiplePopup/src/MultiplePopup.vue
+++ b/src/components/MultiplePopup/src/MultiplePopup.vue
@ -1,206 +1,212 @@
 <template>
-  <div>
-    <a-input
-      v-model:value="popupValue"
-      :placeholder="placeholder"
-      :addonBefore="addonBefore"
-      :addonAfter="addonAfter"
-      :disabled="disabled"
-      :bordered="bordered"
-      autoComplete="off"
-      :size="size"
-      allowClear
-      @click="showDialog"
-      @change="handleChange"
-    >
-      <template #prefix v-if="prefix">
-        <Icon :icon="prefix" />
-      </template>
-      <template #suffix v-if="suffix">
-        <Icon :icon="suffix" />
-      </template>
-    </a-input>
-    <FormItemRest>
-      <MultipleSelect
-        ref="MultipleSelectRef"
-        v-model:multipleDialog="multipleDialog"
-        :popupType="popupType"
-        :dataSourceOptions="dataSourceOptions"
-        :params="params"
-        v-model:value="defaultVal"
-        v-model:popupValue="popupValue"
-        :labelField="labelField"
-        :valueField="valueField"
-        :datasourceType="datasourceType"
-        :dicOptions="dicOptions"
-        :apiConfig="apiConfig"
-        v-model:selectedDataSource="selectedDataSourceVal"
-        :mainKey="mainKey"
-        :subTableIndex="index"
-        @get-list="getList"
-        @submit="handleSubmit"
-      />
-    </FormItemRest>
-  </div>
+    <div>
+        <a-input
+            v-model:value="popupValue"
+            :addonAfter="addonAfter"
+            :addonBefore="addonBefore"
+            :bordered="bordered"
+            :disabled="disabled"
+            :placeholder="placeholder"
+            :size="size"
+            allowClear
+            autoComplete="off"
+            @change="handleChange"
+            @click="showDialog"
+        >
+            <template v-if="prefix" #prefix>
+                <Icon :icon="prefix"/>
+            </template>
+            <template v-if="suffix" #suffix>
+                <Icon :icon="suffix"/>
+            </template>
+        </a-input>
+        <FormItemRest>
+            <MultipleSelect
+                ref="MultipleSelectRef"
+                v-model:multipleDialog="multipleDialog"
+                v-model:popupValue="popupValue"
+                v-model:selectedDataSource="selectedDataSourceVal"
+                v-model:value="defaultVal"
+                :apiConfig="apiConfig"
+                :dataSourceOptions="dataSourceOptions"
+                :datasourceType="datasourceType"
+                :dicOptions="dicOptions"
+                :labelField="labelField"
+                :mainKey="mainKey"
+                :params="params"
+                :popupType="popupType"
+                :subTableIndex="index"
+                :valueField="valueField"
+                @submit="handleSubmit"
+                @get-list="getList"
+            />
+        </FormItemRest>
+    </div>
 </template>
 <script lang="ts" setup>
-  import { ref, watch, nextTick, inject, onMounted } from 'vue';
-  import { Form } from 'ant-design-vue';
-  import { Icon } from '/@/components/Icon';
-  import MultipleSelect from './components/MultipleSelect.vue';
-  import { camelCaseString, isValidJSON } from '/@/utils/event/design';
+    import {ref, watch, nextTick, inject, onMounted} from 'vue';
+    import {Form} from 'ant-design-vue';
+    import {Icon} from '/@/components/Icon';
+    import MultipleSelect from './components/MultipleSelect.vue';
+    import {camelCaseString, isValidJSON} from '/@/utils/event/design';

-  const props = defineProps({
-    popupType: { type: String },
-    value: { type: String },
-    labelField: { type: String, default: 'label' },
-    valueField: { type: String, default: 'value' },
-    placeholder: { type: String },
-    addonBefore: { type: String },
-    addonAfter: { type: String },
-    prefix: { type: String },
-    suffix: { type: String },
-    disabled: { type: Boolean },
-    params: { type: [Array, Object, String, Number] },
-    dataSourceOptions: { type: Array },
-    dicOptions: { type: Array },
-    //数据来源 默认为空  如果不为空 则参数 api
-    datasourceType: String,
-    apiConfig: { type: Object },
-    bordered: {
-      type: Boolean,
-      default: true,
-    },
-    mainKey: String,
-    index: Number,
-    size: String,
-  });
-  const FormItemRest = Form.ItemRest;
-  const formModel = inject<any>('formModel', null);
-  const isCamelCase = inject<boolean>('isCamelCase', false);
-  const multipleDialog = ref<boolean>(false);
-  const popupValue = ref('');
-  const defaultVal = ref<string | undefined>('');
-  const selectedDataSourceVal = ref<any[]>([]);
-  const MultipleSelectRef = ref();
-  const dataSourceList = ref<string[]>([]);
-
-  const emit = defineEmits(['update:value', 'change']);
-
-  watch(
-    () => props.value,
-    () => {
-      popupValue.value = '';
-      nextTick(async () => {
-        await getSubDatasourceList();
-        setFormModel();
-      });
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  const getList = (list) => {
-    dataSourceList.value = list;
-  };
-
-  const showDialog = () => {
-    multipleDialog.value = true;
-  };
-
-  const handleSubmit = (saveValue) => {
-    emit('update:value', saveValue);
-    emit('change');
-  };
-
-  const getSubDatasourceList = async () => {
-    let showValueArr: string[] = [];
-    await MultipleSelectRef.value?.getDatasourceList();
-
-    selectedDataSourceVal.value = [];
-    defaultVal.value = props.value;
-    const selectedArr = props.value?.split(',');
-    dataSourceList.value?.map((item) => {
-      selectedArr?.map((selected) => {
-        if (item[props.valueField] === selected) {
-          selectedDataSourceVal.value?.push(item);
-        }
-      });
+    const props = defineProps({
+        popupType: {type: String},
+        value: {type: String},
+        labelField: {type: String, default: 'label'},
+        valueField: {type: String, default: 'value'},
+        placeholder: {type: String},
+        addonBefore: {type: String},
+        addonAfter: {type: String},
+        prefix: {type: String},
+        suffix: {type: String},
+        disabled: {type: Boolean},
+        params: {type: [Array, Object, String, Number]},
+        dataSourceOptions: {type: Array},
+        dicOptions: {type: Array},
+        //数据来源 默认为空  如果不为空 则参数 api
+        datasourceType: String,
+        apiConfig: {type: Object},
+        bordered: {
+            type: Boolean,
+            default: true,
+        },
+        mainKey: String,
+        index: Number,
+        size: String,
    });
+    const FormItemRest = Form.ItemRest;
+    const formModel = inject<any>('formModel', null);
+    const isCamelCase = inject<boolean>('isCamelCase', false);
+    const multipleDialog = ref<boolean>(false);
+    const popupValue = ref('');
+    const defaultVal = ref<string | undefined>('');
+    const selectedDataSourceVal = ref<any[]>([]);
+    const MultipleSelectRef = ref();
+    const dataSourceList = ref<string[]>([]);

-    showValueArr = selectedDataSourceVal.value?.map((item: any) => {
-      return item[props.labelField!];
-    });
+    const emit = defineEmits(['update:value', 'change']);

-    popupValue.value = showValueArr.length ? showValueArr.join(',') : props.value!;
-  };
+    watch(
+        () => props.value,
+        () => {
+            popupValue.value = '';
+            nextTick(async () => {
+                await getSubDatasourceList();
+                setFormModel();
+            });
+        },
+        {
+            immediate: true,
+        },
+    );

-  const handleChange = (e) => {
-    if (!e.target.value) {
-      emit('update:value', e.target.value);
-      emit('change');
-      MultipleSelectRef.value.setFormModel(true);
-    }
-  };
-  onMounted(() => {
-    if (props.datasourceType === 'api') {
-      props.apiConfig?.apiParams?.forEach((params) => {
-        params.tableInfo?.forEach((o) => {
-          if (o.bindType == 'data') {
-            let val = isValidJSON(o.value);
-            let field = '';
-            if (val && val.bindTable) {
-              let table = !isCamelCase
-                ? val.bindTable + 'List'
-                : camelCaseString(val.bindTable + '_List');
-              field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
-              formModel &&
-                formModel[table!][props.index || 0] &&
-                formModel[table!][props.index || 0][field];
-            } else if (val && val.bindField) {
-              field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
-              formModel && formModel[field];
-            }
-          }
+    const getList = (list) => {
+        dataSourceList.value = list;
+    };
+
+    const showDialog = () => {
+        multipleDialog.value = true;
+    };
+
+    const handleSubmit = (saveValue) => {
+        emit('update:value', saveValue);
+        emit('change');
+    };
+
+    const getSubDatasourceList = async () => {
+        debugger;
+        let showValueArr: string[] = [];
+        await MultipleSelectRef.value?.getDatasourceList();
+
+        selectedDataSourceVal.value = [];
+        defaultVal.value = props.value;
+        const selectedArr = props.value?.split(',');
+        dataSourceList.value?.map((item) => {
+            selectedArr?.map((selected) => {
+                let itemVal = item[props.valueField];
+                if ((itemVal || itemVal === 0) && typeof selected === 'string') {
+                    // 处理当key为数字类型时
+                    itemVal += '';
+                }
+                if (itemVal === selected) {
+                    selectedDataSourceVal.value?.push(item);
+                }
+            });
        });
-      });
-      getSubDatasourceList();
-    }
-  });
-  const setFormModel = (isNull?) => {
-    if (props.popupType === 'associate') {
-      let assoConfig = props.datasourceType == 'dic' ? props.dicOptions : [];
-      if (!formModel) return;

-      assoConfig?.map((item: any) => {
-        if (item.bindField) {
-          const value = selectedDataSourceVal.value.length
-            ? selectedDataSourceVal.value![0][item.name]
-            : '';
-          let bindField = !isCamelCase ? item.bindField : camelCaseString(item.bindField);
-          let bindTable = '';
-          if (item.bindTable) {
-            bindTable = !isCamelCase
-              ? item.bindTable + 'List'!
-              : camelCaseString(item.bindTable + '_List')!;
-          }
-          let val = isNull ? '' : value;
-          if (props.mainKey) {
-            if (!item.bindTable) {
-              formModel[bindField!] = val;
-            } else {
-              formModel[props.mainKey][props.index!][bindField!] = val;
-            }
-          } else {
-            if (item.bindTable) {
-              formModel[bindTable][0][bindField!] = val;
-            } else {
-              formModel[bindField!] = val;
-            }
-          }
+        showValueArr = selectedDataSourceVal.value?.map((item: any) => {
+            return item[props.labelField!];
+        });
+
+        popupValue.value = showValueArr.length ? showValueArr.join(',') : props.value!;
+    };
+
+    const handleChange = (e) => {
+        if (!e.target.value) {
+            emit('update:value', e.target.value);
+            emit('change');
+            MultipleSelectRef.value.setFormModel(true);
        }
-      });
-    }
-  };
+    };
+    onMounted(() => {
+        if (props.datasourceType === 'api') {
+            props.apiConfig?.apiParams?.forEach((params) => {
+                params.tableInfo?.forEach((o) => {
+                    if (o.bindType == 'data') {
+                        let val = isValidJSON(o.value);
+                        let field = '';
+                        if (val && val.bindTable) {
+                            let table = !isCamelCase
+                                ? val.bindTable + 'List'
+                                : camelCaseString(val.bindTable + '_List');
+                            field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
+                            formModel &&
+                            formModel[table!][props.index || 0] &&
+                            formModel[table!][props.index || 0][field];
+                        } else if (val && val.bindField) {
+                            field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
+                            formModel && formModel[field];
+                        }
+                    }
+                });
+            });
+            getSubDatasourceList();
+        }
+    });
+    const setFormModel = (isNull?) => {
+        if (props.popupType === 'associate') {
+            let assoConfig = props.datasourceType == 'dic' ? props.dicOptions : [];
+            if (!formModel) return;
+
+            assoConfig?.map((item: any) => {
+                if (item.bindField) {
+                    const value = selectedDataSourceVal.value.length
+                        ? selectedDataSourceVal.value![0][item.name]
+                        : '';
+                    let bindField = !isCamelCase ? item.bindField : camelCaseString(item.bindField);
+                    let bindTable = '';
+                    if (item.bindTable) {
+                        bindTable = !isCamelCase
+                            ? item.bindTable + 'List'!
+                            : camelCaseString(item.bindTable + '_List')!;
+                    }
+                    let val = isNull ? '' : value;
+                    if (props.mainKey) {
+                        if (!item.bindTable) {
+                            formModel[bindField!] = val;
+                        } else {
+                            formModel[props.mainKey][props.index!][bindField!] = val;
+                        }
+                    } else {
+                        if (item.bindTable) {
+                            formModel[bindTable][0][bindField!] = val;
+                        } else {
+                            formModel[bindField!] = val;
+                        }
+                    }
+                }
+            });
+        }
+    };
 </script>
--- a/src/utils/http/axios/Axios.ts
+++ b/src/utils/http/axios/Axios.ts
@ -310,11 +310,7 @@ export class VAxios {
        })
        .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));
--- a/src/utils/http/axios/index.ts
+++ b/src/utils/http/axios/index.ts
@ -20,245 +20,255 @@ 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';
+import { notification } from 'ant-design-vue';
+import { throttle } from 'lodash-es';

 const globSetting = useGlobSetting();
 const urlPrefix = globSetting.urlPrefix;
 const { createMessage, createErrorModal } = useMessage();

+const showNetworkError = function() {
+    notification.error({
+        message: '网络超时，请检查本地网络是否正常，或者稍后再试',
+        placement: 'topRight',
+        duration: 3
+    });
+};
+
+const trNetworkError = throttle(showNetworkError, 5000, { trailing: false });
+
 /**
 * @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;
+    /**
+     * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
+     */
+    transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
+        const { t } = useI18n();
+        const { isTransformResponse, isReturnNativeResponse } = options;
+        // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+        if (isReturnNativeResponse) {
+            return res;
        }
-    }
-
-    // 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;
+        // 不进行任何处理，直接返回
+        // 用于页面代码可能需要直接获取code，data，message这些信息时开启
+        if (!isTransformResponse) {
+            return res.data;
        }
-        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;
-  },
+        // 错误的时候返回
+
+        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('请求出错，请稍候重试'));
+    },

-  /**
-   * @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;
-  },
+    beforeRequestHook: (config, options) => {
+        const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options;

-  /**
-   * @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);
+        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) {
+                trNetworkError();
+            } else if (err?.includes('Network Error')) {
+                trNetworkError();
+            } else 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);
-      }
-    } 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,
+    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 || {},
-    ),
-  );
+                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