优化客户端请求时候操作的页面不更新

This commit is contained in:
2025-06-06 10:21:14 +08:00
parent ce4e621741
commit 358e9ab745
10 changed files with 162 additions and 81 deletions
+55 -25
View File
@@ -14,8 +14,8 @@ export type ApiResponse<T> = {
export type QueryParams = Record<string, string | number | boolean | undefined>;
// 获取 API 基础 URL
const API_BASE_URL = 'http://172.16.0.58:8008';
// const API_BASE_URL = 'http://nas.7bm.co:3000';
// const API_BASE_URL = 'http://172.16.0.58:8008';
const API_BASE_URL = 'http://nas.7bm.co:3000';
// const API_BASE_URL = 'http://172.18.0.100:3000';
// const API_BASE_URL = 'http://172.16.0.119:9000/admin';
@@ -25,39 +25,66 @@ export const DOCUMENT_URL = 'http://nas.7bm.co:9000/docauditai/';
// 是否使用模拟数据(开发环境使用)
const USE_MOCK_DATA = false; // 设置为true使用模拟数据,避免API连接问题
// 设置超时时间(毫秒)
const DEFAULT_TIMEOUT = 30000; // 增加到30秒
// 创建 axios 实例
const axiosInstance = axios.create({
baseURL: API_BASE_URL,
timeout: 10000, // 10秒超时
timeout: DEFAULT_TIMEOUT, // 增加超时时间
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
});
// 最大重试次数
const MAX_RETRIES = 2;
/**
* 将编码后的URL解码为可读格式
* @param url 编码后的URL
* @returns 解码后的可读URL
* 带重试功能的请求方法
* @param config Axios请求配置
* @param retries 当前重试次数
* @returns Axios响应
*/
function decodeUrlForDisplay(url: string): string {
async function axiosRetry(config: AxiosRequestConfig, retries = 0): Promise<AxiosResponse> {
try {
// 首先解码整个URL
const decodedUrl = decodeURIComponent(url);
// 如果URL中包含@符号作为前缀,则移除它
if (decodedUrl.startsWith('@')) {
return decodedUrl.substring(1);
}
return decodedUrl;
return await axiosInstance(config);
} catch (error) {
// 如果解码失败,返回原始URL
console.error('URL解码失败:', error);
return url;
if (isAxiosError(error) && error.code === 'ECONNABORTED' && retries < MAX_RETRIES) {
console.log(`请求超时,第${retries + 1}次重试...`);
// 递增重试次数并重新发送请求
return axiosRetry(config, retries + 1);
}
throw error;
}
}
/**
* 将编码后的URL解码为可读格式
* 当前已注释掉日志,暂未使用此函数
* @param url 编码后的URL
* @returns 解码后的可读URL
* @unused 保留供将来使用
*/
// function decodeUrlForDisplay(url: string): string {
// try {
// // 首先解码整个URL
// const decodedUrl = decodeURIComponent(url);
//
// // 如果URL中包含@符号作为前缀,则移除它
// if (decodedUrl.startsWith('@')) {
// return decodedUrl.substring(1);
// }
//
// return decodedUrl;
// } catch (error) {
// // 如果解码失败,返回原始URL
// console.error('URL解码失败:', error);
// return url;
// }
// }
/**
* 构建完整的 API URL
*/
@@ -188,8 +215,8 @@ export async function apiRequest<T>(
}
}
// console.log(`📦 axios-client.ts->请求URL: ${decodeUrlForDisplay(url)}`);
// console.log(`axios-client.ts->发送 ${options.method || 'GET'} 请求到: ${decodeUrlForDisplay(url)}`);
// console.log(`📦 axios-client.ts->请求URL: ${url}`);
// console.log(`axios-client.ts->发送 ${options.method || 'GET'} 请求到: ${url}`);
// 处理body参数,转换为data
if (options.body) {
@@ -203,16 +230,19 @@ export async function apiRequest<T>(
const config: AxiosRequestConfig = {
...options,
url,
headers
headers,
// 确保使用默认超时时间
timeout: options.timeout || DEFAULT_TIMEOUT
};
console.log(`📦 axios-client.ts->请求配置: \n${JSON.stringify(config)}`);
// console.log(`📦 axios-client.ts->请求配置: \n${JSON.stringify(config)}`);
// 删除body属性,避免axios警告
if ('body' in config) {
delete (config as ExtendedAxiosRequestConfig).body;
}
const response: AxiosResponse = await axiosInstance(config);
// 使用带重试功能的请求方法
const response: AxiosResponse = await axiosRetry(config);
// 收集响应头信息
const responseHeaders: Record<string, string> = {};
@@ -345,7 +375,7 @@ export async function downloadFile(path: string): Promise<Blob> {
const downloadUrl = `${DOCUMENT_URL}${path}`;
try {
// console.log(`📦 axios-client.ts->下载文件: ${decodeUrlForDisplay(downloadUrl)}`);
// console.log(`📦 axios-client.ts->下载文件: ${downloadUrl}`);
const response = await axios.get(downloadUrl, {
responseType: 'blob'
});
+5 -5
View File
@@ -226,19 +226,19 @@ export async function getDocuments(searchParams: DocumentSearchParams = {}): Pro
// 处理日期范围
if (searchParams.dateFrom) {
// 添加当天开始时间 00:00:00
filter['created_at'] = `gte.${searchParams.dateFrom + ' 00:00:00'}`;
filter['updated_at'] = `gte.${searchParams.dateFrom + ' 00:00:00'}`;
}
if (searchParams.dateTo) {
// 如果有开始日期,使用and条件;否则直接设置结束日期
const dateToKey = searchParams.dateFrom ? 'and' : 'created_at';
const dateToKey = searchParams.dateFrom ? 'and' : 'updated_at';
// 添加当天结束时间 23:59:59
if (dateToKey === 'and') {
delete filter['created_at'];
delete filter['updated_at'];
// 使用OR操作符连接两个条件
filter[dateToKey] = `(created_at.gte.${searchParams.dateFrom+' 00:00:00'},created_at.lte.${searchParams.dateTo+' 23:59:59'})`;
filter[dateToKey] = `(updated_at.gte.${searchParams.dateFrom+' 00:00:00'},updated_at.lte.${searchParams.dateTo+' 23:59:59'})`;
} else {
filter['created_at'] = `lte.${searchParams.dateTo+' 23:59:59'}`;
filter['updated_at'] = `lte.${searchParams.dateTo+' 23:59:59'}`;
}
}
+10 -9
View File
@@ -84,17 +84,17 @@ function logPostgrestQuery(endpoint: string, params?: QueryParams, method: strin
}
}
console.log('\n📦 PostgREST 查询日志 ========================');
console.log(`📦 HTTP 方法: ${method}`);
console.log(`📦 完整 URL: ${decodeUrlForDisplay(fullUrl)}`);
// console.log('\n📦 PostgREST 查询日志 ========================');
// console.log(`📦 HTTP 方法: ${method}`);
// console.log(`📦 完整 URL: ${decodeUrlForDisplay(fullUrl)}`);
// 打印请求体数据(仅适用于POST/PATCH/PUT请求)
if (['POST', 'PATCH', 'PUT'].includes(method) && data) {
console.log('📦 请求体数据:');
console.log(JSON.stringify(data, null, 2));
}
// if (['POST', 'PATCH', 'PUT'].includes(method) && data) {
// console.log('📦 请求体数据:');
// console.log(JSON.stringify(data, null, 2));
// }
console.log('📦 PostgREST 查询日志 ========================\n');
// console.log('📦 PostgREST 查询日志 ========================\n');
}
}
@@ -467,7 +467,8 @@ export async function postgrestPut<T, D extends object>(
headers: {
'Prefer': 'return=representation'
}
}
},
queryParams
);
if (response.error) {