fix(loading): 修复loading状态管理问题并添加超时处理
This commit is contained in:
@@ -14,6 +14,9 @@ const service = axios.create({
|
|||||||
let activeAxios = 0
|
let activeAxios = 0
|
||||||
let timer
|
let timer
|
||||||
let loadingInstance
|
let loadingInstance
|
||||||
|
let isLoadingVisible = false
|
||||||
|
let forceCloseTimer
|
||||||
|
|
||||||
const showLoading = (
|
const showLoading = (
|
||||||
option = {
|
option = {
|
||||||
target: null
|
target: null
|
||||||
@@ -21,13 +24,33 @@ const showLoading = (
|
|||||||
) => {
|
) => {
|
||||||
const loadDom = document.getElementById('gva-base-load-dom')
|
const loadDom = document.getElementById('gva-base-load-dom')
|
||||||
activeAxios++
|
activeAxios++
|
||||||
|
|
||||||
|
// 清除之前的定时器
|
||||||
if (timer) {
|
if (timer) {
|
||||||
clearTimeout(timer)
|
clearTimeout(timer)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 清除强制关闭定时器
|
||||||
|
if (forceCloseTimer) {
|
||||||
|
clearTimeout(forceCloseTimer)
|
||||||
|
}
|
||||||
|
|
||||||
timer = setTimeout(() => {
|
timer = setTimeout(() => {
|
||||||
if (activeAxios > 0) {
|
// 再次检查activeAxios状态,防止竞态条件
|
||||||
|
if (activeAxios > 0 && !isLoadingVisible) {
|
||||||
if (!option.target) option.target = loadDom
|
if (!option.target) option.target = loadDom
|
||||||
loadingInstance = ElLoading.service(option)
|
loadingInstance = ElLoading.service(option)
|
||||||
|
isLoadingVisible = true
|
||||||
|
|
||||||
|
// 设置强制关闭定时器,防止loading永远不关闭(30秒超时)
|
||||||
|
forceCloseTimer = setTimeout(() => {
|
||||||
|
if (isLoadingVisible && loadingInstance) {
|
||||||
|
console.warn('Loading强制关闭:超时30秒')
|
||||||
|
loadingInstance.close()
|
||||||
|
isLoadingVisible = false
|
||||||
|
activeAxios = 0 // 重置计数器
|
||||||
|
}
|
||||||
|
}, 30000)
|
||||||
}
|
}
|
||||||
}, 400)
|
}, 400)
|
||||||
}
|
}
|
||||||
@@ -35,8 +58,44 @@ const showLoading = (
|
|||||||
const closeLoading = () => {
|
const closeLoading = () => {
|
||||||
activeAxios--
|
activeAxios--
|
||||||
if (activeAxios <= 0) {
|
if (activeAxios <= 0) {
|
||||||
|
activeAxios = 0 // 确保不会变成负数
|
||||||
clearTimeout(timer)
|
clearTimeout(timer)
|
||||||
loadingInstance && loadingInstance.close()
|
|
||||||
|
if (forceCloseTimer) {
|
||||||
|
clearTimeout(forceCloseTimer)
|
||||||
|
forceCloseTimer = null
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoadingVisible && loadingInstance) {
|
||||||
|
loadingInstance.close()
|
||||||
|
isLoadingVisible = false
|
||||||
|
}
|
||||||
|
loadingInstance = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 全局重置loading状态的函数,用于异常情况
|
||||||
|
const resetLoading = () => {
|
||||||
|
activeAxios = 0
|
||||||
|
isLoadingVisible = false
|
||||||
|
|
||||||
|
if (timer) {
|
||||||
|
clearTimeout(timer)
|
||||||
|
timer = null
|
||||||
|
}
|
||||||
|
|
||||||
|
if (forceCloseTimer) {
|
||||||
|
clearTimeout(forceCloseTimer)
|
||||||
|
forceCloseTimer = null
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loadingInstance) {
|
||||||
|
try {
|
||||||
|
loadingInstance.close()
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('关闭loading时出错:', e)
|
||||||
|
}
|
||||||
|
loadingInstance = null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// http request 拦截器
|
// http request 拦截器
|
||||||
@@ -105,6 +164,8 @@ service.interceptors.response.use(
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!error.response) {
|
if (!error.response) {
|
||||||
|
// 网络错误时重置loading状态
|
||||||
|
resetLoading()
|
||||||
errorBoxVisible = true
|
errorBoxVisible = true
|
||||||
ElMessageBox.confirm(
|
ElMessageBox.confirm(
|
||||||
`
|
`
|
||||||
@@ -196,4 +257,12 @@ service.interceptors.response.use(
|
|||||||
return error
|
return error
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
// 监听页面卸载事件,确保loading被正确清理
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
window.addEventListener('beforeunload', resetLoading)
|
||||||
|
window.addEventListener('unload', resetLoading)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出service和resetLoading函数
|
||||||
|
export { resetLoading }
|
||||||
export default service
|
export default service
|
||||||
|
Reference in New Issue
Block a user