hookehuyr

fix(AdPage): 修复广告图片加载逻辑并优化错误处理

改进广告图片加载失败时的重试机制,增加状态管理和错误处理
调整超时处理逻辑,避免频繁请求
添加必要的日志输出以便调试
<!--
* @Date: 2025-01-09 00:00:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-28 11:28:21
* @LastEditTime: 2025-09-28 14:00:58
* @FilePath: /lls_program/src/components/RankingCard.vue
* @Description: 排行榜卡片组件
-->
......@@ -608,7 +608,7 @@ defineExpose({
font-size: 20rpx;
margin-bottom: 12rpx;
text-align: center;
max-width: 120rpx;
max-width: 140rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
......
......@@ -146,11 +146,13 @@ const handleImageClick = () => {
* 图片加载完成处理
*/
const handleImageLoad = () => {
console.log('图片加载成功');
clearLoadingTimeout();
imageLoading.value = false;
imageLoadError.value = false;
isTimeout.value = false;
showManualRefresh.value = false;
loading.value = false;
retryCount.value = 0;
};
......@@ -158,26 +160,45 @@ const handleImageLoad = () => {
* 图片加载失败处理
*/
const handleImageError = () => {
console.log('图片加载失败');
clearLoadingTimeout();
imageLoading.value = false;
imageLoadError.value = true;
handleLoadingTimeout();
// 不要在这里直接调用handleLoadingTimeout,让重试逻辑统一处理
setTimeout(() => {
handleLoadingTimeout();
}, 100);
};
/**
* 重试加载图片
*/
const retryLoadImage = () => {
const retryLoadImage = async () => {
// 重置状态
imageLoading.value = true;
imageLoadError.value = false;
isTimeout.value = false;
showManualRefresh.value = false;
loading.value = true;
// 开始超时检测
startLoadingTimeout();
try {
// 开始超时检测
startLoadingTimeout();
// 重新获取广告配置
fetchAdConfig();
// 重新获取广告配置
await fetchAdConfig();
// 广告配置成功后,清除超时定时器
clearLoadingTimeout();
imageLoading.value = false;
} catch (error) {
console.error('重试获取广告配置失败:', error);
// 重试失败时触发超时处理
handleLoadingTimeout();
} finally {
loading.value = false;
}
};
/**
......@@ -185,13 +206,11 @@ const retryLoadImage = () => {
*/
const startLoadingTimeout = () => {
// 清除之前的定时器
if (loadingTimeout.value) {
clearTimeout(loadingTimeout.value);
}
clearLoadingTimeout();
// 设置10秒超时
loadingTimeout.value = setTimeout(() => {
if (imageLoading.value) {
if (imageLoading.value || loading.value) {
console.warn('图片加载超时');
isTimeout.value = true;
handleLoadingTimeout();
......@@ -203,14 +222,22 @@ const startLoadingTimeout = () => {
* 处理加载超时
*/
const handleLoadingTimeout = () => {
// 清除超时定时器
clearLoadingTimeout();
if (retryCount.value < maxRetries.value) {
// 自动重试
retryCount.value++;
console.log(`第${retryCount.value}次自动重试加载`);
retryLoadImage();
// 延迟1秒后重试,避免频繁请求
setTimeout(() => {
retryLoadImage();
}, 1000);
} else {
// 超过最大重试次数,显示手动刷新选项
imageLoading.value = false;
loading.value = false;
showManualRefresh.value = true;
console.error('图片加载失败,已达到最大重试次数');
}
......@@ -231,6 +258,9 @@ const clearLoadingTimeout = () => {
*/
const initializePage = async () => {
try {
// 重置重试计数
retryCount.value = 0;
// 开始超时检测
startLoadingTimeout();
......@@ -254,18 +284,37 @@ const initializePage = async () => {
if (!adConfigSuccess) {
try {
await fetchAdConfig();
adConfigSuccess = true;
console.log('重试获取广告配置成功');
} catch (retryError) {
console.error('重试获取广告配置仍然失败:', retryError);
}
}
// 如果广告配置成功,清除超时定时器并设置成功状态
if (adConfigSuccess) {
clearLoadingTimeout();
imageLoading.value = false;
imageLoadError.value = false;
} else {
// 广告配置失败,触发重试逻辑
imageLoadError.value = true;
handleLoadingTimeout();
}
} catch (familyError) {
console.error('检查家庭状态失败:', familyError);
throw familyError; // 家庭状态检查失败需要抛出错误
// 家庭状态检查失败,但仍然尝试显示广告
if (adConfigSuccess) {
clearLoadingTimeout();
imageLoading.value = false;
} else {
handleLoadingTimeout();
}
}
} catch (error) {
console.error('页面初始化失败:', error);
// 初始化失败时也要处理超时
// 初始化失败时处理超时
handleLoadingTimeout();
} finally {
loading.value = false;
......