fix: 调整网络错误的提示形式，出现网络超时不再踢出登录
fix: 修复当key为数字类型时，联想弹层第一次选择显示title失败的bug
This commit is contained in:
gaoyunqi
@ -121,6 +121,9 @@ export const basicComponents = [
|
|||||||
typeName: t('计数组件'),
|
typeName: t('计数组件'),
|
||||||
type: 'number',
|
type: 'number',
|
||||||
options: {
|
options: {
|
||||||
|
labelWidthMode: 'fix',
|
||||||
|
labelFixWidth: 120,
|
||||||
|
responsive: false,
|
||||||
width: '100%',
|
width: '100%',
|
||||||
span: '',
|
span: '',
|
||||||
defaultValue: 0,
|
defaultValue: 0,
|
||||||
@ -1165,6 +1168,9 @@ export const infoComponents = [
|
|||||||
typeName: t('人员选择'),
|
typeName: t('人员选择'),
|
||||||
type: 'user',
|
type: 'user',
|
||||||
options: {
|
options: {
|
||||||
|
labelWidthMode: 'fix',
|
||||||
|
labelFixWidth: 120,
|
||||||
|
responsive: false,
|
||||||
span: '',
|
span: '',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
defaultValue: '',
|
defaultValue: '',
|
||||||
|
|||||||
@ -1,206 +1,212 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<a-input
|
<a-input
|
||||||
v-model:value="popupValue"
|
v-model:value="popupValue"
|
||||||
:placeholder="placeholder"
|
:addonAfter="addonAfter"
|
||||||
:addonBefore="addonBefore"
|
:addonBefore="addonBefore"
|
||||||
:addonAfter="addonAfter"
|
:bordered="bordered"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:bordered="bordered"
|
:placeholder="placeholder"
|
||||||
autoComplete="off"
|
:size="size"
|
||||||
:size="size"
|
allowClear
|
||||||
allowClear
|
autoComplete="off"
|
||||||
@click="showDialog"
|
@change="handleChange"
|
||||||
@change="handleChange"
|
@click="showDialog"
|
||||||
>
|
>
|
||||||
<template #prefix v-if="prefix">
|
<template v-if="prefix" #prefix>
|
||||||
<Icon :icon="prefix" />
|
<Icon :icon="prefix"/>
|
||||||
</template>
|
</template>
|
||||||
<template #suffix v-if="suffix">
|
<template v-if="suffix" #suffix>
|
||||||
<Icon :icon="suffix" />
|
<Icon :icon="suffix"/>
|
||||||
</template>
|
</template>
|
||||||
</a-input>
|
</a-input>
|
||||||
<FormItemRest>
|
<FormItemRest>
|
||||||
<MultipleSelect
|
<MultipleSelect
|
||||||
ref="MultipleSelectRef"
|
ref="MultipleSelectRef"
|
||||||
v-model:multipleDialog="multipleDialog"
|
v-model:multipleDialog="multipleDialog"
|
||||||
:popupType="popupType"
|
v-model:popupValue="popupValue"
|
||||||
:dataSourceOptions="dataSourceOptions"
|
v-model:selectedDataSource="selectedDataSourceVal"
|
||||||
:params="params"
|
v-model:value="defaultVal"
|
||||||
v-model:value="defaultVal"
|
:apiConfig="apiConfig"
|
||||||
v-model:popupValue="popupValue"
|
:dataSourceOptions="dataSourceOptions"
|
||||||
:labelField="labelField"
|
:datasourceType="datasourceType"
|
||||||
:valueField="valueField"
|
:dicOptions="dicOptions"
|
||||||
:datasourceType="datasourceType"
|
:labelField="labelField"
|
||||||
:dicOptions="dicOptions"
|
:mainKey="mainKey"
|
||||||
:apiConfig="apiConfig"
|
:params="params"
|
||||||
v-model:selectedDataSource="selectedDataSourceVal"
|
:popupType="popupType"
|
||||||
:mainKey="mainKey"
|
:subTableIndex="index"
|
||||||
:subTableIndex="index"
|
:valueField="valueField"
|
||||||
@get-list="getList"
|
@submit="handleSubmit"
|
||||||
@submit="handleSubmit"
|
@get-list="getList"
|
||||||
/>
|
/>
|
||||||
</FormItemRest>
|
</FormItemRest>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, watch, nextTick, inject, onMounted } from 'vue';
|
import {ref, watch, nextTick, inject, onMounted} from 'vue';
|
||||||
import { Form } from 'ant-design-vue';
|
import {Form} from 'ant-design-vue';
|
||||||
import { Icon } from '/@/components/Icon';
|
import {Icon} from '/@/components/Icon';
|
||||||
import MultipleSelect from './components/MultipleSelect.vue';
|
import MultipleSelect from './components/MultipleSelect.vue';
|
||||||
import { camelCaseString, isValidJSON } from '/@/utils/event/design';
|
import {camelCaseString, isValidJSON} from '/@/utils/event/design';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
popupType: { type: String },
|
popupType: {type: String},
|
||||||
value: { type: String },
|
value: {type: String},
|
||||||
labelField: { type: String, default: 'label' },
|
labelField: {type: String, default: 'label'},
|
||||||
valueField: { type: String, default: 'value' },
|
valueField: {type: String, default: 'value'},
|
||||||
placeholder: { type: String },
|
placeholder: {type: String},
|
||||||
addonBefore: { type: String },
|
addonBefore: {type: String},
|
||||||
addonAfter: { type: String },
|
addonAfter: {type: String},
|
||||||
prefix: { type: String },
|
prefix: {type: String},
|
||||||
suffix: { type: String },
|
suffix: {type: String},
|
||||||
disabled: { type: Boolean },
|
disabled: {type: Boolean},
|
||||||
params: { type: [Array, Object, String, Number] },
|
params: {type: [Array, Object, String, Number]},
|
||||||
dataSourceOptions: { type: Array },
|
dataSourceOptions: {type: Array},
|
||||||
dicOptions: { type: Array },
|
dicOptions: {type: Array},
|
||||||
//数据来源 默认为空 如果不为空 则参数 api
|
//数据来源 默认为空 如果不为空 则参数 api
|
||||||
datasourceType: String,
|
datasourceType: String,
|
||||||
apiConfig: { type: Object },
|
apiConfig: {type: Object},
|
||||||
bordered: {
|
bordered: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
mainKey: String,
|
mainKey: String,
|
||||||
index: Number,
|
index: Number,
|
||||||
size: String,
|
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 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) => {
|
const emit = defineEmits(['update:value', 'change']);
|
||||||
return item[props.labelField!];
|
|
||||||
});
|
|
||||||
|
|
||||||
popupValue.value = showValueArr.length ? showValueArr.join(',') : props.value!;
|
watch(
|
||||||
};
|
() => props.value,
|
||||||
|
() => {
|
||||||
|
popupValue.value = '';
|
||||||
|
nextTick(async () => {
|
||||||
|
await getSubDatasourceList();
|
||||||
|
setFormModel();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
const handleChange = (e) => {
|
const getList = (list) => {
|
||||||
if (!e.target.value) {
|
dataSourceList.value = list;
|
||||||
emit('update:value', e.target.value);
|
};
|
||||||
emit('change');
|
|
||||||
MultipleSelectRef.value.setFormModel(true);
|
const showDialog = () => {
|
||||||
}
|
multipleDialog.value = true;
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
|
||||||
if (props.datasourceType === 'api') {
|
const handleSubmit = (saveValue) => {
|
||||||
props.apiConfig?.apiParams?.forEach((params) => {
|
emit('update:value', saveValue);
|
||||||
params.tableInfo?.forEach((o) => {
|
emit('change');
|
||||||
if (o.bindType == 'data') {
|
};
|
||||||
let val = isValidJSON(o.value);
|
|
||||||
let field = '';
|
const getSubDatasourceList = async () => {
|
||||||
if (val && val.bindTable) {
|
debugger;
|
||||||
let table = !isCamelCase
|
let showValueArr: string[] = [];
|
||||||
? val.bindTable + 'List'
|
await MultipleSelectRef.value?.getDatasourceList();
|
||||||
: camelCaseString(val.bindTable + '_List');
|
|
||||||
field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
|
selectedDataSourceVal.value = [];
|
||||||
formModel &&
|
defaultVal.value = props.value;
|
||||||
formModel[table!][props.index || 0] &&
|
const selectedArr = props.value?.split(',');
|
||||||
formModel[table!][props.index || 0][field];
|
dataSourceList.value?.map((item) => {
|
||||||
} else if (val && val.bindField) {
|
selectedArr?.map((selected) => {
|
||||||
field = !isCamelCase ? val.bindField : camelCaseString(val.bindField);
|
let itemVal = item[props.valueField];
|
||||||
formModel && formModel[field];
|
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) => {
|
showValueArr = selectedDataSourceVal.value?.map((item: any) => {
|
||||||
if (item.bindField) {
|
return item[props.labelField!];
|
||||||
const value = selectedDataSourceVal.value.length
|
});
|
||||||
? selectedDataSourceVal.value![0][item.name]
|
|
||||||
: '';
|
popupValue.value = showValueArr.length ? showValueArr.join(',') : props.value!;
|
||||||
let bindField = !isCamelCase ? item.bindField : camelCaseString(item.bindField);
|
};
|
||||||
let bindTable = '';
|
|
||||||
if (item.bindTable) {
|
const handleChange = (e) => {
|
||||||
bindTable = !isCamelCase
|
if (!e.target.value) {
|
||||||
? item.bindTable + 'List'!
|
emit('update:value', e.target.value);
|
||||||
: camelCaseString(item.bindTable + '_List')!;
|
emit('change');
|
||||||
}
|
MultipleSelectRef.value.setFormModel(true);
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
}
|
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>
|
</script>
|
||||||
|
|||||||
@ -310,11 +310,7 @@ export class VAxios {
|
|||||||
})
|
})
|
||||||
.catch((e: Error | AxiosError) => {
|
.catch((e: Error | AxiosError) => {
|
||||||
if (e.message.includes('timeout') || e.message.includes('Network Error')) {
|
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)) {
|
if (requestCatchHook && isFunction(requestCatchHook)) {
|
||||||
reject(requestCatchHook(e, opt));
|
reject(requestCatchHook(e, opt));
|
||||||
|
|||||||
@ -20,245 +20,255 @@ import { useUserStoreWithOut } from '/@/store/modules/user';
|
|||||||
import { AxiosRetry } from '/@/utils/http/axios/axiosRetry';
|
import { AxiosRetry } from '/@/utils/http/axios/axiosRetry';
|
||||||
import { useGo } from '/@/hooks/web/usePage';
|
import { useGo } from '/@/hooks/web/usePage';
|
||||||
import { validateScript } from '/@/utils/event/design';
|
import { validateScript } from '/@/utils/event/design';
|
||||||
|
import { notification } from 'ant-design-vue';
|
||||||
|
import { throttle } from 'lodash-es';
|
||||||
|
|
||||||
const globSetting = useGlobSetting();
|
const globSetting = useGlobSetting();
|
||||||
const urlPrefix = globSetting.urlPrefix;
|
const urlPrefix = globSetting.urlPrefix;
|
||||||
const { createMessage, createErrorModal } = useMessage();
|
const { createMessage, createErrorModal } = useMessage();
|
||||||
|
|
||||||
|
const showNetworkError = function() {
|
||||||
|
notification.error({
|
||||||
|
message: '网络超时，请检查本地网络是否正常，或者稍后再试',
|
||||||
|
placement: 'topRight',
|
||||||
|
duration: 3
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const trNetworkError = throttle(showNetworkError, 5000, { trailing: false });
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description: 数据处理，方便区分多种处理方式
|
* @description: 数据处理，方便区分多种处理方式
|
||||||
*/
|
*/
|
||||||
const transform: AxiosTransform = {
|
const transform: AxiosTransform = {
|
||||||
/**
|
/**
|
||||||
* @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
|
* @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
|
||||||
*/
|
*/
|
||||||
transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
|
transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { isTransformResponse, isReturnNativeResponse } = options;
|
const { isTransformResponse, isReturnNativeResponse } = options;
|
||||||
// 是否返回原生响应头 比如：需要获取响应头时使用该属性
|
// 是否返回原生响应头 比如：需要获取响应头时使用该属性
|
||||||
if (isReturnNativeResponse) {
|
if (isReturnNativeResponse) {
|
||||||
return res;
|
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;
|
|
||||||
}
|
}
|
||||||
}
|
// 不进行任何处理，直接返回
|
||||||
|
// 用于页面代码可能需要直接获取code，data，message这些信息时开启
|
||||||
// errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
|
if (!isTransformResponse) {
|
||||||
// errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示
|
return res.data;
|
||||||
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,
|
const { data: result } = res;
|
||||||
Object.assign({}, config.params, config.data),
|
if (!result) {
|
||||||
);
|
// return '[HTTP] Request has no return value';
|
||||||
}
|
throw new Error(t('请求出错，请稍候重试'));
|
||||||
} else {
|
}
|
||||||
// 兼容restful风格
|
// 这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
|
||||||
config.url = config.url + params;
|
const { code, data, msg } = result;
|
||||||
config.params = undefined;
|
|
||||||
}
|
// 这里逻辑可以根据项目进行修改
|
||||||
}
|
const hasSuccess = code === ResultEnum.SUCCESS;
|
||||||
return config;
|
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
|
// 请求之前处理config
|
||||||
const token = getToken();
|
beforeRequestHook: (config, options) => {
|
||||||
if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
|
const { apiUrl, joinPrefix, joinParamsToUrl, formatDate, joinTime = true, urlPrefix } = options;
|
||||||
// jwt token
|
|
||||||
(config as Recordable).headers.Authorization = options.authenticationScheme
|
|
||||||
? `${options.authenticationScheme} ${token}`
|
|
||||||
: token;
|
|
||||||
}
|
|
||||||
return config;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
if (joinPrefix) {
|
||||||
* @description: 响应拦截器处理
|
config.url = `${urlPrefix}${config.url}`;
|
||||||
*/
|
|
||||||
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 (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);
|
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>) {
|
function createAxios(opt?: Partial<CreateAxiosOptions>) {
|
||||||
return new VAxios(
|
return new VAxios(
|
||||||
deepMerge(
|
deepMerge(
|
||||||
{
|
{
|
||||||
// See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
|
// See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes
|
||||||
// authentication schemes，e.g: Bearer
|
// authentication schemes，e.g: Bearer
|
||||||
// authenticationScheme: 'Bearer',
|
// authenticationScheme: 'Bearer',
|
||||||
authenticationScheme: 'Bearer',
|
authenticationScheme: 'Bearer',
|
||||||
timeout: 10 * 1000,
|
timeout: 10 * 1000,
|
||||||
// 基础接口地址
|
// 基础接口地址
|
||||||
// baseURL: globSetting.apiUrl,
|
// baseURL: globSetting.apiUrl,
|
||||||
|
|
||||||
headers: { 'Content-Type': ContentTypeEnum.JSON },
|
headers: { 'Content-Type': ContentTypeEnum.JSON },
|
||||||
// 如果是form-data格式
|
// 如果是form-data格式
|
||||||
// headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
|
// headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
|
||||||
// 数据处理方式
|
// 数据处理方式
|
||||||
transform: clone(transform),
|
transform: clone(transform),
|
||||||
// 配置项，下面的选项都可以在独立的接口请求中覆盖
|
// 配置项，下面的选项都可以在独立的接口请求中覆盖
|
||||||
requestOptions: {
|
requestOptions: {
|
||||||
// 默认将prefix 添加到url
|
// 默认将prefix 添加到url
|
||||||
joinPrefix: true,
|
joinPrefix: true,
|
||||||
// 是否返回原生响应头 比如：需要获取响应头时使用该属性
|
// 是否返回原生响应头 比如：需要获取响应头时使用该属性
|
||||||
isReturnNativeResponse: false,
|
isReturnNativeResponse: false,
|
||||||
// 需要对返回数据进行处理
|
// 需要对返回数据进行处理
|
||||||
isTransformResponse: true,
|
isTransformResponse: true,
|
||||||
// post请求的时候添加参数到url
|
// post请求的时候添加参数到url
|
||||||
joinParamsToUrl: false,
|
joinParamsToUrl: false,
|
||||||
// 格式化提交参数时间
|
// 格式化提交参数时间
|
||||||
formatDate: true,
|
formatDate: true,
|
||||||
// 消息提示类型
|
// 消息提示类型
|
||||||
errorMessageMode: 'message',
|
errorMessageMode: 'message',
|
||||||
// 接口地址
|
// 接口地址
|
||||||
apiUrl: globSetting.apiUrl,
|
apiUrl: globSetting.apiUrl,
|
||||||
// 接口拼接地址
|
// 接口拼接地址
|
||||||
urlPrefix: urlPrefix,
|
urlPrefix: urlPrefix,
|
||||||
// 是否加入时间戳
|
// 是否加入时间戳
|
||||||
joinTime: true,
|
joinTime: true,
|
||||||
// 忽略重复请求
|
// 忽略重复请求
|
||||||
ignoreCancelToken: true,
|
ignoreCancelToken: true,
|
||||||
// 是否携带token
|
// 是否携带token
|
||||||
withToken: true,
|
withToken: true,
|
||||||
retryRequest: {
|
retryRequest: {
|
||||||
isOpenRetry: false,
|
isOpenRetry: false,
|
||||||
count: 5,
|
count: 5,
|
||||||
waitTime: 100,
|
waitTime: 100
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
opt || {},
|
opt || {}
|
||||||
),
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const defHttp = createAxios();
|
export const defHttp = createAxios();
|
||||||
|
|
||||||
// other api url
|
// other api url
|
||||||
|
|||||||
Reference in New Issue
Block a user