全局自动loading管理的模块封装
This commit is contained in:
minimaxagent1
parent
092c2e6b9b
commit
1b64f0f02f
2
main.js
2
main.js
|
|
@ -42,7 +42,7 @@ import httpConfig from '@/common/http.config.js'
|
|||
Vue.use(httpConfig, app)
|
||||
|
||||
// 初始化全局loading管理器
|
||||
import { initGlobalLoadingManager } from '@/utils/request.js'
|
||||
import { initGlobalLoadingManager } from '@/utils/loading-manager.js'
|
||||
initGlobalLoadingManager()
|
||||
// Vue.use(httpApi, app)
|
||||
// #ifdef MP-WEIXIN
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<script>
|
||||
import { navigateToPage } from "../../utils/router.js";
|
||||
import { wxLogin } from "../../api/auth/auth.js";
|
||||
import { forceHideLoading, PageLoadingManager } from "../../utils/request.js";
|
||||
import { forceHideLoading, AutoLoadingManager } from "../../utils/loading-manager.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -35,7 +35,7 @@ import { forceHideLoading, PageLoadingManager } from "../../utils/request.js";
|
|||
},
|
||||
onLoad() {
|
||||
// 初始化页面loading管理器
|
||||
this.pageLoading = new PageLoadingManager()
|
||||
this.pageLoading = new AutoLoadingManager()
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时清除loading
|
||||
|
|
|
|||
236
utils/loading-manager.js
Normal file
236
utils/loading-manager.js
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
/**
|
||||
* 全局自动Loading管理器
|
||||
* 提供智能的Loading状态管理，支持并发请求计数和超时保护
|
||||
*/
|
||||
|
||||
// 环境配置
|
||||
const ENV_CONFIG = {
|
||||
develop: {
|
||||
loadingText: '开发环境加载中~',
|
||||
loadingTime: 100
|
||||
},
|
||||
trial: {
|
||||
loadingText: '体验版加载中~',
|
||||
loadingTime: 100
|
||||
},
|
||||
release: {
|
||||
loadingText: '加载中~',
|
||||
loadingTime: 100
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前环境配置
|
||||
const getCurrentConfig = () => {
|
||||
try {
|
||||
const { envVersion } = wx.getAccountInfoSync().miniProgram
|
||||
console.log('当前环境:', envVersion)
|
||||
return ENV_CONFIG[envVersion] || ENV_CONFIG.release
|
||||
} catch (error) {
|
||||
console.warn('获取环境失败，默认使用正式环境:', error)
|
||||
return ENV_CONFIG.release
|
||||
}
|
||||
}
|
||||
|
||||
const config = getCurrentConfig()
|
||||
|
||||
// 全局状态管理
|
||||
let isLoading = false
|
||||
let loadingTimer = null
|
||||
let loadingCount = 0 // 请求计数器
|
||||
|
||||
/**
|
||||
* 设置loading超时自动清除
|
||||
*/
|
||||
const setLoadingTimeout = () => {
|
||||
if (loadingTimer) {
|
||||
clearTimeout(loadingTimer)
|
||||
}
|
||||
loadingTimer = setTimeout(() => {
|
||||
console.warn('Loading超时，强制清除')
|
||||
forceHideLoading()
|
||||
}, 30000) // 30秒超时
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示加载状态
|
||||
* @param {string} text - 加载提示文字
|
||||
*/
|
||||
function showLoading(text = config.loadingText) {
|
||||
try {
|
||||
loadingCount++
|
||||
if (!isLoading) {
|
||||
isLoading = true
|
||||
uni.showLoading({
|
||||
title: text,
|
||||
mask: true
|
||||
})
|
||||
// 设置超时清除
|
||||
setLoadingTimeout()
|
||||
console.log('显示Loading:', text)
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('显示loading失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏加载状态
|
||||
*/
|
||||
function hideLoading() {
|
||||
try {
|
||||
loadingCount--
|
||||
if (loadingCount > 0) {
|
||||
console.log('还有其他请求在进行，不隐藏Loading, 剩余请求数:', loadingCount)
|
||||
return // 还有其他请求在进行
|
||||
}
|
||||
if (isLoading) {
|
||||
isLoading = false
|
||||
// 清除超时定时器
|
||||
if (loadingTimer) {
|
||||
clearTimeout(loadingTimer)
|
||||
loadingTimer = null
|
||||
}
|
||||
uni.hideLoading()
|
||||
console.log('隐藏Loading')
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('隐藏loading失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 强制隐藏loading
|
||||
*/
|
||||
export function forceHideLoading() {
|
||||
try {
|
||||
isLoading = false
|
||||
loadingCount = 0
|
||||
if (loadingTimer) {
|
||||
clearTimeout(loadingTimer)
|
||||
loadingTimer = null
|
||||
}
|
||||
uni.hideLoading()
|
||||
console.log('强制隐藏Loading')
|
||||
} catch (error) {
|
||||
console.warn('强制隐藏loading失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前loading状态
|
||||
* @returns {Object} loading状态信息
|
||||
*/
|
||||
export function getLoadingStatus() {
|
||||
return {
|
||||
isLoading,
|
||||
loadingCount,
|
||||
hasTimer: !!loadingTimer
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置loading配置
|
||||
* @param {Object} newConfig - 新的配置
|
||||
*/
|
||||
export function setLoadingConfig(newConfig) {
|
||||
Object.assign(config, newConfig)
|
||||
console.log('更新Loading配置:', config)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取loading配置
|
||||
* @returns {Object} 当前配置
|
||||
*/
|
||||
export function getLoadingConfig() {
|
||||
return { ...config }
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示loading（带延迟）
|
||||
* @param {string} text - 加载提示文字
|
||||
* @param {number} delay - 延迟时间（毫秒）
|
||||
*/
|
||||
export function showLoadingWithDelay(text = config.loadingText, delay = config.loadingTime) {
|
||||
setTimeout(() => {
|
||||
showLoading(text)
|
||||
}, delay)
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏loading（带延迟）
|
||||
* @param {number} delay - 延迟时间（毫秒）
|
||||
*/
|
||||
export function hideLoadingWithDelay(delay = 500) {
|
||||
setTimeout(() => {
|
||||
hideLoading()
|
||||
}, delay)
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化全局loading管理器
|
||||
*/
|
||||
export function initGlobalLoadingManager() {
|
||||
// 监听页面显示事件
|
||||
uni.$on('page-show', () => {
|
||||
console.log('页面显示，检查loading状态')
|
||||
// 页面显示时检查loading状态，如果超时则清除
|
||||
if (isLoading && loadingTimer) {
|
||||
const remainingTime = 30000 - (Date.now() - (loadingTimer._startTime || Date.now()))
|
||||
if (remainingTime <= 0) {
|
||||
console.warn('页面显示时发现超时loading，强制清除')
|
||||
forceHideLoading()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 监听页面隐藏事件
|
||||
uni.$on('page-hide', () => {
|
||||
console.log('页面隐藏')
|
||||
})
|
||||
|
||||
// 监听应用显示事件
|
||||
uni.$on('app-show', () => {
|
||||
console.log('应用显示')
|
||||
})
|
||||
|
||||
// 监听应用隐藏事件
|
||||
uni.$on('app-hide', () => {
|
||||
console.log('应用隐藏，清除loading')
|
||||
forceHideLoading()
|
||||
})
|
||||
|
||||
console.log('全局loading管理器已初始化')
|
||||
}
|
||||
|
||||
/**
|
||||
* 简化的自动loading管理类
|
||||
*/
|
||||
export class AutoLoadingManager {
|
||||
constructor() {
|
||||
this.isActive = false
|
||||
}
|
||||
|
||||
// 显示loading（可选）
|
||||
show(text = '加载中...') {
|
||||
this.isActive = true
|
||||
// 这里可以选择是否显示额外的loading
|
||||
// 默认情况下，所有API调用都会自动显示loading
|
||||
}
|
||||
|
||||
// 隐藏loading（可选）
|
||||
hide() {
|
||||
this.isActive = false
|
||||
// 这里可以选择是否手动隐藏loading
|
||||
// 默认情况下，API调用完成后会自动隐藏loading
|
||||
}
|
||||
|
||||
// 销毁管理器
|
||||
destroy() {
|
||||
this.isActive = false
|
||||
// 页面卸载时可以选择是否强制清除loading
|
||||
// forceHideLoading()
|
||||
}
|
||||
}
|
||||
|
||||
// 导出内部方法供request.js使用
|
||||
export { showLoading, hideLoading, config }
|
||||
153
utils/request.js
153
utils/request.js
|
|
@ -1,19 +1,23 @@
|
|||
// 统一请求工具
|
||||
import { getTempToken, shouldUseTempToken } from '@/config/dev.js'
|
||||
import {
|
||||
showLoading,
|
||||
hideLoading,
|
||||
forceHideLoading,
|
||||
initGlobalLoadingManager,
|
||||
config as loadingConfig
|
||||
} from './loading-manager.js'
|
||||
|
||||
// 环境配置
|
||||
const ENV_CONFIG = {
|
||||
develop: { // 开发环境
|
||||
baseUrl: 'http://192.168.2.7:4501',
|
||||
loadingText: '开发环境加载中~',
|
||||
},
|
||||
trial: { // 体验版
|
||||
baseUrl: 'https://testlu.chuangtewl.com/prod-api',
|
||||
loadingText: '体验版加载中~',
|
||||
},
|
||||
release: { // 正式版
|
||||
baseUrl: 'https://testlu.chuangtewl.com/prod-api',
|
||||
loadingText: '加载中~',
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -32,22 +36,6 @@ const getCurrentConfig = () => {
|
|||
const config = getCurrentConfig()
|
||||
const BASE_URL = config.baseUrl
|
||||
|
||||
// 全局自动loading管理
|
||||
let isLoading = false
|
||||
let loadingTimer = null
|
||||
let loadingCount = 0 // 请求计数器
|
||||
|
||||
// 设置loading超时自动清除
|
||||
const setLoadingTimeout = () => {
|
||||
if (loadingTimer) {
|
||||
clearTimeout(loadingTimer)
|
||||
}
|
||||
loadingTimer = setTimeout(() => {
|
||||
console.warn('Loading超时，强制清除')
|
||||
forceHideLoading()
|
||||
}, 30000) // 30秒超时
|
||||
}
|
||||
|
||||
// 调试信息
|
||||
console.log('HTTP配置:', {
|
||||
baseUrl: BASE_URL,
|
||||
|
|
@ -129,49 +117,7 @@ function handleResponseError(res, reject, options = {}) {
|
|||
reject(new Error(error.title))
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示加载状态
|
||||
* @param {string} text - 加载提示文字
|
||||
*/
|
||||
function showLoading(text = config.loadingText) {
|
||||
try {
|
||||
loadingCount++
|
||||
if (!isLoading) {
|
||||
isLoading = true
|
||||
uni.showLoading({
|
||||
title: text,
|
||||
mask: true
|
||||
})
|
||||
// 设置超时清除
|
||||
setLoadingTimeout()
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('显示loading失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏加载状态
|
||||
*/
|
||||
function hideLoading() {
|
||||
try {
|
||||
loadingCount--
|
||||
if (loadingCount > 0) {
|
||||
return // 还有其他请求在进行
|
||||
}
|
||||
if (isLoading) {
|
||||
isLoading = false
|
||||
// 清除超时定时器
|
||||
if (loadingTimer) {
|
||||
clearTimeout(loadingTimer)
|
||||
loadingTimer = null
|
||||
}
|
||||
uni.hideLoading()
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('隐藏loading失败:', error)
|
||||
}
|
||||
}
|
||||
// Loading相关函数已从loading-manager.js导入
|
||||
|
||||
/**
|
||||
* 统一请求方法
|
||||
|
|
@ -291,7 +237,7 @@ export function request(options = {}) {
|
|||
|
||||
// 显示loading（默认显示，但减少延迟）
|
||||
if (options.showLoading !== false) {
|
||||
showLoading(options.loadingText || config.loadingText)
|
||||
showLoading(options.loadingText || loadingConfig.loadingText)
|
||||
}
|
||||
|
||||
uni.request(requestOptions)
|
||||
|
|
@ -402,83 +348,4 @@ export function getToken() {
|
|||
return uni.getStorageSync('token')
|
||||
}
|
||||
|
||||
/**
|
||||
* 强制隐藏loading
|
||||
*/
|
||||
export function forceHideLoading() {
|
||||
try {
|
||||
isLoading = false
|
||||
loadingCount = 0
|
||||
if (loadingTimer) {
|
||||
clearTimeout(loadingTimer)
|
||||
loadingTimer = null
|
||||
}
|
||||
uni.hideLoading()
|
||||
} catch (error) {
|
||||
console.warn('强制隐藏loading失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化全局loading管理器
|
||||
*/
|
||||
export function initGlobalLoadingManager() {
|
||||
// 监听页面显示事件
|
||||
uni.$on('page-show', () => {
|
||||
console.log('页面显示，检查loading状态')
|
||||
// 页面显示时检查loading状态，如果超时则清除
|
||||
if (isLoading && loadingTimer) {
|
||||
const remainingTime = 30000 - (Date.now() - (loadingTimer._startTime || Date.now()))
|
||||
if (remainingTime <= 0) {
|
||||
console.warn('页面显示时发现超时loading，强制清除')
|
||||
forceHideLoading()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 监听页面隐藏事件
|
||||
uni.$on('page-hide', () => {
|
||||
console.log('页面隐藏')
|
||||
})
|
||||
|
||||
// 监听应用显示事件
|
||||
uni.$on('app-show', () => {
|
||||
console.log('应用显示')
|
||||
})
|
||||
|
||||
// 监听应用隐藏事件
|
||||
uni.$on('app-hide', () => {
|
||||
console.log('应用隐藏，清除loading')
|
||||
forceHideLoading()
|
||||
})
|
||||
|
||||
console.log('全局loading管理器已初始化')
|
||||
}
|
||||
|
||||
// 简化的自动loading管理类
|
||||
export class AutoLoadingManager {
|
||||
constructor() {
|
||||
this.isActive = false
|
||||
}
|
||||
|
||||
// 显示loading（可选）
|
||||
show(text = '加载中...') {
|
||||
this.isActive = true
|
||||
// 这里可以选择是否显示额外的loading
|
||||
// 默认情况下，所有API调用都会自动显示loading
|
||||
}
|
||||
|
||||
// 隐藏loading（可选）
|
||||
hide() {
|
||||
this.isActive = false
|
||||
// 这里可以选择是否手动隐藏loading
|
||||
// 默认情况下，API调用完成后会自动隐藏loading
|
||||
}
|
||||
|
||||
// 销毁管理器
|
||||
destroy() {
|
||||
this.isActive = false
|
||||
// 页面卸载时可以选择是否强制清除loading
|
||||
// forceHideLoading()
|
||||
}
|
||||
}
|
||||
// Loading管理相关函数已从loading-manager.js导入
|
||||
Loading…
Reference in New Issue
Block a user