feat:针对弱网环境,侧边栏添加并行加载,重试机制,初始化优化

This commit is contained in:
2026-02-27 23:18:06 +08:00
parent 6ea628d869
commit 88670be15e

View File

@@ -179,6 +179,24 @@ const axiosInstance = axios.create({
baseURL: APM_STORE_BASE_URL,
timeout: 5000, // 增加到 5 秒,避免网络波动导致的超时
});
const fetchWithRetry = async <T>(
url: string,
retries = 3,
delay = 1000,
): Promise<T> => {
try {
const response = await axiosInstance.get<T>(url);
return response.data;
} catch (error) {
if (retries > 0) {
await new Promise((resolve) => setTimeout(resolve, delay));
return fetchWithRetry(url, retries - 1, delay * 2);
}
throw error;
}
};
const cacheBuster = (url: string) => `${url}?cb=${Date.now()}`;
// 响应式状态
@@ -739,23 +757,21 @@ const loadCategories = async () => {
const loadApps = async (onFirstBatch?: () => void) => {
try {
logger.info("开始加载应用数据(并发分批...");
logger.info("开始加载应用数据(并发带重试...");
const categoriesList = Object.keys(categories.value || {});
const concurrency = 4; // 同时并发请求数量,可根据网络条件调整
let firstBatchCallDone = false;
for (let i = 0; i < categoriesList.length; i += concurrency) {
const batch = categoriesList.slice(i, i + concurrency);
// 并发加载所有分类,每个分类自带重试机制
await Promise.all(
batch.map(async (category) => {
categoriesList.map(async (category) => {
try {
logger.info(`加载分类: ${category}`);
const response = await axiosInstance.get<AppJson[]>(
const categoryApps = await fetchWithRetry<AppJson[]>(
cacheBuster(`/${window.apm_store.arch}/${category}/applist.json`),
);
const categoryApps = response.status === 200 ? response.data : [];
categoryApps.forEach((appJson) => {
const normalizedApp: App = {
const normalizedApps = (categoryApps || []).map((appJson) => ({
name: appJson.Name,
pkgname: appJson.Pkgname,
version: appJson.Version,
@@ -774,21 +790,29 @@ const loadApps = async (onFirstBatch?: () => void) => {
: appJson.img_urls,
icons: appJson.icons,
category: category,
currentStatus: "not-installed",
};
apps.value.push(normalizedApp);
});
currentStatus: "not-installed" as const,
}));
// 增量式更新,让用户尽快看到部分数据
apps.value.push(...normalizedApps);
// 只要有一个分类加载成功,就可以考虑关闭整体 loading如果是首批逻辑
if (!firstBatchCallDone && typeof onFirstBatch === "function") {
firstBatchCallDone = true;
onFirstBatch();
}
} catch (error) {
logger.warn(`加载分类 ${category} 失败: ${error}`);
logger.warn(`加载分类 ${category} 最终失败: ${error}`);
}
}),
);
// 首批完成回调(用于隐藏首屏 loading
if (i === 0 && typeof onFirstBatch === "function") onFirstBatch();
// 确保即使全部失败也结束 loading
if (!firstBatchCallDone && typeof onFirstBatch === "function") {
onFirstBatch();
}
} catch (error) {
logger.error(`加载应用数据失败: ${error}`);
logger.error(`加载应用数据流程异常: ${error}`);
}
};
@@ -805,14 +829,18 @@ onMounted(async () => {
initTheme();
await loadCategories();
// 默认加载主页数据
await loadHome();
// 先显示 loading并异步开始分批加载应用列表。
// 分类目录加载后,并行加载主页数据和所有应用列表
loading.value = true;
await Promise.all([
loadHome(),
new Promise<void>((resolve) => {
loadApps(() => {
// 当第一批分类加载完成后,隐藏首屏 loading
loading.value = false;
resolve();
});
}),
]);
// 设置键盘导航
document.addEventListener("keydown", (e) => {