fix: 清理前端异步请求生命周期

- 页面卸载和弹窗关闭时终止 SSE

- 为版本检查增加超时、中止与重复请求保护
This commit is contained in:
2026-07-27 19:41:48 +08:00
parent a904f63ec8
commit 908eb5583d
6 changed files with 125 additions and 30 deletions

View File

@@ -20,6 +20,8 @@ const props = withDefaults(defineProps<Props>(), {
});
let isCheckingUpdates = false;
let versionCheckController: AbortController | null = null;
const VERSION_CHECK_TIMEOUT_MS = 10_000;
const currentVersionTag = ref('');
const lastVersionTag = ref('');
const timer = ref<ReturnType<typeof setInterval>>();
@@ -36,6 +38,12 @@ const [UpdateNoticeModal, modalApi] = useEasyFlowModal({
});
async function getVersionTag() {
const controller = new AbortController();
versionCheckController = controller;
const timeout = setTimeout(
() => controller.abort(),
VERSION_CHECK_TIMEOUT_MS,
);
try {
if (
location.hostname === 'localhost' ||
@@ -47,14 +55,22 @@ async function getVersionTag() {
cache: 'no-cache',
method: 'HEAD',
redirect: 'manual',
signal: controller.signal,
});
return (
response.headers.get('etag') || response.headers.get('last-modified')
);
} catch {
console.error('Failed to fetch version tag');
} catch (error) {
if (!controller.signal.aborted) {
console.error('Failed to fetch version tag', error);
}
return null;
} finally {
clearTimeout(timeout);
if (versionCheckController === controller) {
versionCheckController = null;
}
}
}
@@ -71,23 +87,35 @@ async function checkForUpdates() {
}
if (lastVersionTag.value !== versionTag && versionTag) {
clearInterval(timer.value);
stop();
handleNotice(versionTag);
}
}
async function runUpdateCheck() {
if (isCheckingUpdates) return;
isCheckingUpdates = true;
try {
await checkForUpdates();
} finally {
isCheckingUpdates = false;
}
}
function handleNotice(versionTag: string) {
currentVersionTag.value = versionTag;
modalApi.open();
}
function start() {
stop();
if (props.checkUpdatesInterval <= 0) {
return;
}
// 每 checkUpdatesInterval(默认值为1) 分钟检查一次
timer.value = setInterval(
checkForUpdates,
() => void runUpdateCheck(),
props.checkUpdatesInterval * 60 * 1000,
);
}
@@ -96,18 +124,21 @@ function handleVisibilitychange() {
if (document.hidden) {
stop();
} else {
if (!isCheckingUpdates) {
isCheckingUpdates = true;
checkForUpdates().finally(() => {
isCheckingUpdates = false;
runUpdateCheck().finally(() => {
if (!document.hidden) {
start();
});
}
}
});
}
}
function stop() {
clearInterval(timer.value);
if (timer.value !== undefined) {
clearInterval(timer.value);
timer.value = undefined;
}
versionCheckController?.abort();
versionCheckController = null;
}
onMounted(() => {