Files
admin-ui/src/utils/request.ts

230 lines
6.4 KiB
TypeScript
Raw Normal View History

2025-12-04 16:33:38 +08:00
import axios, { AxiosInstance, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
2025-11-20 09:10:35 +08:00
import { ElMessage, ElMessageBox } from 'element-plus';
import { Session } from '/@/utils/storage';
import qs from 'qs';
import { getChangedFields } from '/@/utils/diffUtils';
2025-11-20 09:10:35 +08:00
2025-12-04 16:33:38 +08:00
// 标记是否正在处理 token 过期,避免重复弹窗
let isHandlingTokenExpired = false;
// 错误消息防抖:防止短时间内显示多个错误消息
let lastErrorTime = 0;
const ERROR_MESSAGE_INTERVAL = 2000; // 2秒内只显示一个错误
const showErrorMessage = (message: string) => {
const now = Date.now();
// 2秒内只显示一个错误消息不管内容是否相同
if (now - lastErrorTime < ERROR_MESSAGE_INTERVAL) {
return; // 跳过
}
lastErrorTime = now;
ElMessage.error(message);
};
2025-11-27 15:37:13 +08:00
// 配置新建第一个 axios 实例(原来的主服务)
2025-11-20 09:10:35 +08:00
const service: AxiosInstance = axios.create({
2025-12-04 16:33:38 +08:00
baseURL: import.meta.env.VITE_API_URL,
timeout: 50000,
headers: { 'Content-Type': 'application/json' },
2025-11-20 09:10:35 +08:00
paramsSerializer: {
serialize(params) {
2025-11-20 13:25:29 +08:00
return qs.stringify(params, { allowDots: true, arrayFormat: 'brackets' });
2025-11-20 09:10:35 +08:00
},
},
});
2025-11-27 15:37:13 +08:00
// 配置新建第二个 axios 实例(新功能服务)
const newService: AxiosInstance = axios.create({
baseURL: 'http://192.168.3.200:8000/',
// baseURL: 'http://192.168.3.11:8000/',
2025-12-04 16:33:38 +08:00
timeout: 50000,
headers: { 'Content-Type': 'application/json' },
2025-11-27 15:37:13 +08:00
paramsSerializer: {
serialize(params) {
return qs.stringify(params, { allowDots: true, arrayFormat: 'brackets' });
},
2025-11-20 09:10:35 +08:00
},
2025-11-27 15:37:13 +08:00
});
2025-12-04 16:33:38 +08:00
// token 过期处理函数
const handleTokenExpired = () => {
if (isHandlingTokenExpired) return;
isHandlingTokenExpired = true;
ElMessageBox.alert('登录状态已过期,请重新登录', '提示', {
confirmButtonText: '确定',
showClose: false,
closeOnClickModal: false,
closeOnPressEscape: false,
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
done();
performLogout();
}
},
})
.then(() => {
performLogout();
})
.catch(() => {
performLogout();
});
};
// 执行退出登录操作
const performLogout = () => {
Session.clear();
localStorage.clear();
isHandlingTokenExpired = false;
// 跳转到后台管理登录页,确保完全刷新
2025-12-04 16:33:38 +08:00
setTimeout(() => {
window.location.href = '/login';
2025-12-04 16:33:38 +08:00
}, 500);
};
// 请求拦截器
const requestInterceptor = (config: InternalAxiosRequestConfig) => {
// 检查 token 是否有效
const token = Session.get('token');
if (token) {
// 可以在这里添加 token 有效性检查(如果需要)
config.headers!['Authorization'] = `Bearer ${token}`;
2025-11-20 09:10:35 +08:00
}
// PUT 请求最小化传参处理
// 如果请求数据中包含 _originalData则自动计算差异只传递修改过的字段
if (config.method?.toLowerCase() === 'put' && config.data && typeof config.data === 'object') {
const { _originalData, ...currentData } = config.data;
if (_originalData && typeof _originalData === 'object') {
// 获取 id 字段(必须保留)
const idField = currentData.id || currentData.Id || currentData.ID;
// 计算差异
const changedFields = getChangedFields(_originalData, currentData, {
exclude: ['_originalData', 'id', 'Id', 'ID'],
});
// 如果有变化,只传递 id + 变化的字段
if (Object.keys(changedFields).length > 0) {
config.data = { id: idField, ...changedFields };
} else {
// 没有变化,只传递 id
config.data = { id: idField };
}
console.log('[最小化传参] 原始字段数:', Object.keys(currentData).length, '-> 传递字段数:', Object.keys(config.data).length);
}
}
2025-11-27 15:37:13 +08:00
return config;
};
2025-11-20 09:10:35 +08:00
2025-11-27 15:37:13 +08:00
const requestErrorHandler = (error: any) => {
return Promise.reject(error);
};
2025-12-04 16:33:38 +08:00
// 响应拦截器
const responseInterceptor = (response: AxiosResponse) => {
// 文件流响应直接返回
2025-12-03 17:24:34 +08:00
if (
response.config.responseType === 'blob' ||
response.headers['content-type']?.includes('application/zip') ||
response.headers['content-type']?.includes('application/octet-stream')
) {
2025-12-04 16:33:38 +08:00
return response;
}
const res = response.data;
const httpStatus = response.status;
const code = res?.code;
const message = res?.message;
// 检查 token 相关错误
if (
httpStatus === 401 ||
code === 401 ||
message?.includes('token') ||
message === 'token is invalid' ||
message === 'token 解析失败' ||
message?.includes('decrypt error')
) {
handleTokenExpired();
return Promise.reject(new Error('登录状态已过期'));
2025-12-03 17:24:34 +08:00
}
2025-12-04 16:33:38 +08:00
// 业务逻辑错误处理
if (code !== undefined && code !== 0 && code !== 200) {
const errorMsg = message || `请求失败(${code})`;
showErrorMessage(errorMsg);
2025-12-04 16:33:38 +08:00
return Promise.reject(new Error(errorMsg));
2025-11-27 15:37:13 +08:00
}
2025-12-04 16:33:38 +08:00
return res;
2025-11-27 15:37:13 +08:00
};
2025-12-04 16:33:38 +08:00
// 响应错误拦截器
2025-11-27 15:37:13 +08:00
const responseErrorHandler = (error: any) => {
2025-12-04 16:33:38 +08:00
console.error('API请求错误:', error);
if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
showErrorMessage('请求超时,请检查网络连接');
2025-12-04 16:33:38 +08:00
return Promise.reject(new Error('请求超时'));
2025-11-20 09:10:35 +08:00
}
2025-12-04 16:33:38 +08:00
if (!error.response) {
if (error.message === 'Network Error') {
2025-12-05 15:45:14 +08:00
// ElMessage.error('网络连接错误,请检查网络设置');
2025-12-04 16:33:38 +08:00
} else {
2025-12-05 12:27:02 +08:00
// ElMessage.error('网络异常,请检查连接');
2025-12-04 16:33:38 +08:00
}
return Promise.reject(error);
}
const httpStatus = error.response.status;
// 优先使用返回数据中的 message 字段
const responseMessage = error.response.data?.message;
2025-12-04 16:33:38 +08:00
// 处理 HTTP 错误状态
switch (httpStatus) {
case 401:
handleTokenExpired();
break;
case 403:
showErrorMessage(responseMessage || '没有权限访问该资源');
2025-12-04 16:33:38 +08:00
break;
case 404:
showErrorMessage(responseMessage || '请求的资源不存在');
2025-12-04 16:33:38 +08:00
break;
case 500:
showErrorMessage(responseMessage || '服务器内部错误');
2025-12-04 16:33:38 +08:00
break;
case 502:
showErrorMessage(responseMessage || '网关错误');
2025-12-04 16:33:38 +08:00
break;
case 503:
showErrorMessage(responseMessage || '服务不可用');
2025-12-04 16:33:38 +08:00
break;
default:
if (httpStatus >= 400) {
showErrorMessage(responseMessage || `请求失败(${httpStatus})`);
2025-12-04 16:33:38 +08:00
}
}
2025-11-27 15:37:13 +08:00
return Promise.reject(error);
};
2025-12-04 16:33:38 +08:00
// 为实例添加拦截器
2025-11-27 15:37:13 +08:00
service.interceptors.request.use(requestInterceptor, requestErrorHandler);
service.interceptors.response.use(responseInterceptor, responseErrorHandler);
newService.interceptors.request.use(requestInterceptor, requestErrorHandler);
newService.interceptors.response.use(responseInterceptor, responseErrorHandler);
2025-11-20 09:10:35 +08:00
2025-12-04 16:33:38 +08:00
// 导出
export default service;
export { newService, showErrorMessage };