全局自动loading管理
This commit is contained in:
parent
ce6ee8413d
commit
092c2e6b9b
|
|
@ -16,7 +16,5 @@ import { get, post } from '@/utils/request'
|
|||
* @returns {Promise} 返回捐款记录列表
|
||||
*/
|
||||
export function getDonorList(params) {
|
||||
return get('/app/donor/listDonor', params, {
|
||||
showLoading: false // 使用页面级别的loading管理
|
||||
})
|
||||
return get('/app/donor/listDonor', params)
|
||||
}
|
||||
|
|
@ -18,9 +18,7 @@ export function getInstitutionalList(params = {}) {
|
|||
isAsc: 'descending'
|
||||
}
|
||||
|
||||
return get('/app/formed/listFormed', { ...defaultParams, ...params }, {
|
||||
showLoading: false // 使用页面级别的loading管理
|
||||
})
|
||||
return get('/app/formed/listFormed', { ...defaultParams, ...params })
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@ import { get, put, del } from '@/utils/request'
|
|||
* @returns {Promise} 返回建制详情
|
||||
*/
|
||||
export function getInstitutionalDetail(formedId) {
|
||||
return get('/app/formed/formedDetail', { formedId }, {
|
||||
showLoading: false // 使用页面级别的loading管理
|
||||
})
|
||||
return get('/app/formed/formedDetail', { formedId })
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -6,7 +6,5 @@ import { get } from '@/utils/request.js'
|
|||
* @returns {Promise}
|
||||
*/
|
||||
export function getMonkList(params = {}) {
|
||||
return get('/app/monk/listMonk', params, {
|
||||
showLoading: false // 使用页面级别的loading管理
|
||||
})
|
||||
return get('/app/monk/listMonk', params)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,7 @@ import { get, post, put, del } from '../../utils/request.js';
|
|||
* @returns {Promise} 返回高僧详情数据
|
||||
*/
|
||||
export function getMonkDetail(monkId) {
|
||||
return get('/app/monk/monkById', { monkId }, {
|
||||
showLoading: false // 使用页面级别的loading管理
|
||||
});
|
||||
return get('/app/monk/monkById', { monkId });
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -27,8 +25,6 @@ export function getMonkList(params = {}) {
|
|||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
...params
|
||||
}, {
|
||||
showLoading: false // 使用页面级别的loading管理
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@ import ProjectInfo from "./components/project-info.vue";
|
|||
import DonationSummary from "./components/donation-summary.vue";
|
||||
import DonationList from "./components/donation-list.vue";
|
||||
import { donationMixin } from "./mixins/donation-mixin.js";
|
||||
import { PageLoadingManager } from "../../utils/request.js";
|
||||
|
||||
export default {
|
||||
mixins: [donationMixin],
|
||||
|
|
@ -70,19 +69,10 @@ export default {
|
|||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 初始化页面loading管理器
|
||||
this.pageLoading = new PageLoadingManager()
|
||||
|
||||
// 获取页面参数
|
||||
if (options.formedId) {
|
||||
this.initData(options.formedId)
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时清除loading
|
||||
if (this.pageLoading) {
|
||||
this.pageLoading.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@ import StatusDisplay from "../../components/status-display/status-display.vue";
|
|||
import { InstitutionalDataFormatter } from "./utils/data-formatter.js";
|
||||
import { dataManagerMixin } from "./mixins/data-manager.js";
|
||||
import CommonEnum from "../../enum/common";
|
||||
import { PageLoadingManager } from "../../utils/request.js";
|
||||
|
||||
export default {
|
||||
mixins: [dataManagerMixin],
|
||||
|
|
@ -58,27 +57,14 @@ export default {
|
|||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 初始化页面loading管理器
|
||||
this.pageLoading = new PageLoadingManager()
|
||||
// 页面加载时获取数据
|
||||
this.getInstitutionalData()
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时清除loading
|
||||
if (this.pageLoading) {
|
||||
this.pageLoading.destroy()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取建制数据
|
||||
async getInstitutionalData(isLoadMore = false) {
|
||||
console.log('开始获取建制数据, isLoadMore:', isLoadMore)
|
||||
|
||||
// 显示页面loading
|
||||
if (this.pageLoading && !isLoadMore) {
|
||||
this.pageLoading.show('努力加载中~')
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await this.fetchData(
|
||||
isLoadMore,
|
||||
|
|
@ -95,12 +81,6 @@ export default {
|
|||
title: '获取数据失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
// 隐藏页面loading
|
||||
if (this.pageLoading && !isLoadMore) {
|
||||
this.pageLoading.hide()
|
||||
console.log('页面loading已隐藏')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export const dataManagerMixin = {
|
|||
async fetchData(isLoadMore = false, apiCall, dataTransformer) {
|
||||
// 只在加载更多时设置loading状态,初始加载使用页面级别loading
|
||||
if (isLoadMore) {
|
||||
this.loading = true
|
||||
this.loading = true
|
||||
}
|
||||
|
||||
try {
|
||||
|
|
@ -69,7 +69,7 @@ export const dataManagerMixin = {
|
|||
} finally {
|
||||
// 只在加载更多时清除loading状态
|
||||
if (isLoadMore) {
|
||||
this.loading = false
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -217,11 +217,6 @@ export const donationMixin = {
|
|||
async initData(formedId) {
|
||||
console.log('初始化捐款记录数据, formedId:', formedId)
|
||||
|
||||
// 显示页面loading
|
||||
if (this.pageLoading) {
|
||||
this.pageLoading.show('努力加载中~')
|
||||
}
|
||||
|
||||
try {
|
||||
this.formedId = formedId
|
||||
await this.loadProjectInfo()
|
||||
|
|
@ -233,12 +228,6 @@ export const donationMixin = {
|
|||
title: '初始化数据失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
// 隐藏页面loading
|
||||
if (this.pageLoading) {
|
||||
this.pageLoading.hide()
|
||||
console.log('页面loading已隐藏')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ import { forceHideLoading, PageLoadingManager } from "../../utils/request.js";
|
|||
});
|
||||
// 延迟跳转,让用户看到成功提示
|
||||
setTimeout(() => {
|
||||
that.ceshi()
|
||||
that.ceshi()
|
||||
}, 1500);
|
||||
} else {
|
||||
// 处理业务逻辑错误
|
||||
|
|
|
|||
|
|
@ -50,7 +50,6 @@ import MonkEnum from "../../enum/monk";
|
|||
import {getMonkDetail} from "../../api/monk/monkDetail.js";
|
||||
import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
|
||||
import BaseBackground from "../../components/base-background/base-background.vue";
|
||||
import { PageLoadingManager } from "../../utils/request.js";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -73,20 +72,11 @@ export default {
|
|||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 初始化页面loading管理器
|
||||
this.pageLoading = new PageLoadingManager()
|
||||
|
||||
// 获取传递的参数
|
||||
if (options.id) {
|
||||
this.fetchMonkDetail(options.id);
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
// 页面卸载时清除loading
|
||||
if (this.pageLoading) {
|
||||
this.pageLoading.destroy()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换标签
|
||||
switchTab(index) {
|
||||
|
|
@ -96,11 +86,6 @@ export default {
|
|||
async fetchMonkDetail(monkId) {
|
||||
console.log('开始获取高僧详情, monkId:', monkId)
|
||||
|
||||
// 显示页面loading
|
||||
if (this.pageLoading) {
|
||||
this.pageLoading.show('努力加载中~')
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await getMonkDetail(monkId);
|
||||
console.log('高僧详情API响应:', res)
|
||||
|
|
@ -123,12 +108,6 @@ export default {
|
|||
title: '网络错误',
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
// 隐藏页面loading
|
||||
if (this.pageLoading) {
|
||||
this.pageLoading.hide()
|
||||
console.log('页面loading已隐藏')
|
||||
}
|
||||
}
|
||||
},
|
||||
// 更新标签内容
|
||||
|
|
|
|||
119
pages/test/simple-loading-demo.vue
Normal file
119
pages/test/simple-loading-demo.vue
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
<template>
|
||||
<view class="simple-loading-demo">
|
||||
<view class="demo-section">
|
||||
<text class="section-title">简化Loading使用示例</text>
|
||||
<text class="description">现在所有API调用都会自动显示loading,无需手动管理</text>
|
||||
|
||||
<button @click="testAutoLoading" class="demo-btn">测试自动Loading</button>
|
||||
<button @click="testNoLoading" class="demo-btn">测试无Loading</button>
|
||||
<button @click="testMultipleRequests" class="demo-btn">测试多个请求</button>
|
||||
</view>
|
||||
|
||||
<view class="result-section">
|
||||
<text class="section-title">测试结果</text>
|
||||
<text class="result-text">{{ testResult }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get } from '@/utils/request.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
testResult: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 测试自动loading(默认行为)
|
||||
async testAutoLoading() {
|
||||
try {
|
||||
this.testResult = '正在测试自动loading...'
|
||||
// 这个请求会自动显示loading
|
||||
const result = await get('/app/monk/listMonk', { pageNum: 1, pageSize: 5 })
|
||||
this.testResult = `自动loading测试成功:\n${JSON.stringify(result, null, 2)}`
|
||||
} catch (error) {
|
||||
this.testResult = `自动loading测试失败: ${error.message}`
|
||||
}
|
||||
},
|
||||
|
||||
// 测试无loading
|
||||
async testNoLoading() {
|
||||
try {
|
||||
this.testResult = '正在测试无loading...'
|
||||
// 这个请求不会显示loading
|
||||
const result = await get('/app/monk/listMonk', { pageNum: 1, pageSize: 5 }, {
|
||||
showLoading: false
|
||||
})
|
||||
this.testResult = `无loading测试成功:\n${JSON.stringify(result, null, 2)}`
|
||||
} catch (error) {
|
||||
this.testResult = `无loading测试失败: ${error.message}`
|
||||
}
|
||||
},
|
||||
|
||||
// 测试多个并发请求
|
||||
async testMultipleRequests() {
|
||||
try {
|
||||
this.testResult = '正在测试多个并发请求...'
|
||||
|
||||
// 同时发起多个请求,loading会智能管理
|
||||
const promises = [
|
||||
get('/app/monk/listMonk', { pageNum: 1, pageSize: 3 }),
|
||||
get('/app/formed/listFormed', { pageNum: 1, pageSize: 3 }),
|
||||
get('/app/donor/listDonor', { formedId: '1', pageNum: 1, pageSize: 3 })
|
||||
]
|
||||
|
||||
const results = await Promise.all(promises)
|
||||
this.testResult = `多个请求测试成功:\n${JSON.stringify(results, null, 2)}`
|
||||
} catch (error) {
|
||||
this.testResult = `多个请求测试失败: ${error.message}`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.simple-loading-demo {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 30rpx;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.demo-btn {
|
||||
margin: 20rpx 0;
|
||||
padding: 20rpx;
|
||||
background-color: #007aff;
|
||||
color: white;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.result-section {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
153
utils/request.js
153
utils/request.js
|
|
@ -32,9 +32,10 @@ const getCurrentConfig = () => {
|
|||
const config = getCurrentConfig()
|
||||
const BASE_URL = config.baseUrl
|
||||
|
||||
// 全局loading状态管理
|
||||
// 全局自动loading管理
|
||||
let isLoading = false
|
||||
let loadingTimer = null
|
||||
let loadingCount = 0 // 请求计数器
|
||||
|
||||
// 设置loading超时自动清除
|
||||
const setLoadingTimeout = () => {
|
||||
|
|
@ -134,6 +135,7 @@ function handleResponseError(res, reject, options = {}) {
|
|||
*/
|
||||
function showLoading(text = config.loadingText) {
|
||||
try {
|
||||
loadingCount++
|
||||
if (!isLoading) {
|
||||
isLoading = true
|
||||
uni.showLoading({
|
||||
|
|
@ -153,6 +155,10 @@ function showLoading(text = config.loadingText) {
|
|||
*/
|
||||
function hideLoading() {
|
||||
try {
|
||||
loadingCount--
|
||||
if (loadingCount > 0) {
|
||||
return // 还有其他请求在进行
|
||||
}
|
||||
if (isLoading) {
|
||||
isLoading = false
|
||||
// 清除超时定时器
|
||||
|
|
@ -176,7 +182,7 @@ function hideLoading() {
|
|||
* @param {Object} options.data - 请求体数据
|
||||
* @param {Object} options.header - 请求头
|
||||
* @param {number} options.timeout - 超时时间
|
||||
* @param {boolean} options.showLoading - 是否显示加载状态
|
||||
* @param {boolean} options.showLoading - 是否显示加载状态(默认true)
|
||||
* @param {string} options.loadingText - 加载提示文字
|
||||
* @param {boolean} options.noToken - 是否需要token
|
||||
* @returns {Promise} 返回请求结果
|
||||
|
|
@ -237,12 +243,14 @@ export function request(options = {}) {
|
|||
originalUrl: options.url
|
||||
})
|
||||
|
||||
// 根据错误类型显示不同的提示
|
||||
// 网络错误处理
|
||||
let errorMessage = '网络错误'
|
||||
if (err.errMsg && err.errMsg.includes('invalid url')) {
|
||||
errorMessage = '请求地址无效'
|
||||
} else if (err.errMsg && err.errMsg.includes('timeout')) {
|
||||
errorMessage = '请求超时'
|
||||
if (err.errMsg) {
|
||||
if (err.errMsg.includes('timeout')) {
|
||||
errorMessage = '请求超时'
|
||||
} else if (err.errMsg.includes('fail')) {
|
||||
errorMessage = '网络连接失败'
|
||||
}
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
|
|
@ -250,31 +258,27 @@ export function request(options = {}) {
|
|||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
|
||||
reject(err)
|
||||
}
|
||||
}
|
||||
|
||||
// 特殊接口处理
|
||||
if (url === '/login/login' || url === '/wxLogin' || url === '/user/login') {
|
||||
requestOptions.header.noToken = true
|
||||
// 特殊接口处理(不需要token的接口)
|
||||
const noTokenUrls = ['/wxLogin', '/user/login']
|
||||
if (noTokenUrls.includes(url) || options.noToken) {
|
||||
delete requestOptions.header.Authorization
|
||||
console.log('跳过token验证的接口:', url)
|
||||
}
|
||||
|
||||
// 添加参数
|
||||
if (options.params) {
|
||||
// 处理请求参数
|
||||
if (options.params && Object.keys(options.params).length > 0) {
|
||||
requestOptions.data = options.params
|
||||
}
|
||||
|
||||
if (options.data) {
|
||||
if (options.data && Object.keys(options.data).length > 0) {
|
||||
requestOptions.data = options.data
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
if (options.showLoading !== false) {
|
||||
setTimeout(() => {
|
||||
showLoading(options.loadingText || config.loadingText)
|
||||
}, config.loadingTime)
|
||||
}
|
||||
|
||||
// 发起请求
|
||||
console.log('发起请求:', {
|
||||
url: requestOptions.url,
|
||||
|
|
@ -284,6 +288,12 @@ export function request(options = {}) {
|
|||
timeout: requestOptions.timeout,
|
||||
baseUrl: BASE_URL
|
||||
})
|
||||
|
||||
// 显示loading(默认显示,但减少延迟)
|
||||
if (options.showLoading !== false) {
|
||||
showLoading(options.loadingText || config.loadingText)
|
||||
}
|
||||
|
||||
uni.request(requestOptions)
|
||||
})
|
||||
}
|
||||
|
|
@ -292,7 +302,7 @@ export function request(options = {}) {
|
|||
* GET请求
|
||||
* @param {string} url - 请求地址
|
||||
* @param {Object} params - 查询参数
|
||||
* @param {Object} options - 请求选项
|
||||
* @param {Object} options - 请求配置
|
||||
* @returns {Promise} 返回请求结果
|
||||
*/
|
||||
export function get(url, params = {}, options = {}) {
|
||||
|
|
@ -308,7 +318,7 @@ export function get(url, params = {}, options = {}) {
|
|||
* POST请求
|
||||
* @param {string} url - 请求地址
|
||||
* @param {Object} data - 请求体数据
|
||||
* @param {Object} options - 请求选项
|
||||
* @param {Object} options - 请求配置
|
||||
* @returns {Promise} 返回请求结果
|
||||
*/
|
||||
export function post(url, data = {}, options = {}) {
|
||||
|
|
@ -324,7 +334,7 @@ export function post(url, data = {}, options = {}) {
|
|||
* PUT请求
|
||||
* @param {string} url - 请求地址
|
||||
* @param {Object} data - 请求体数据
|
||||
* @param {Object} options - 请求选项
|
||||
* @param {Object} options - 请求配置
|
||||
* @returns {Promise} 返回请求结果
|
||||
*/
|
||||
export function put(url, data = {}, options = {}) {
|
||||
|
|
@ -339,7 +349,7 @@ export function put(url, data = {}, options = {}) {
|
|||
/**
|
||||
* DELETE请求
|
||||
* @param {string} url - 请求地址
|
||||
* @param {Object} options - 请求选项
|
||||
* @param {Object} options - 请求配置
|
||||
* @returns {Promise} 返回请求结果
|
||||
*/
|
||||
export function del(url, options = {}) {
|
||||
|
|
@ -352,15 +362,16 @@ export function del(url, options = {}) {
|
|||
|
||||
/**
|
||||
* 设置请求配置
|
||||
* @param {Object} newConfig - 新的配置对象
|
||||
* @param {Object} newConfig - 新的配置
|
||||
*/
|
||||
export function setRequestConfig(newConfig) {
|
||||
Object.assign(config, newConfig)
|
||||
console.log('更新请求配置:', config)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取当前配置
|
||||
* @returns {Object} 当前配置对象
|
||||
* 获取请求配置
|
||||
* @returns {Object} 当前配置
|
||||
*/
|
||||
export function getRequestConfig() {
|
||||
return { ...config }
|
||||
|
|
@ -371,7 +382,7 @@ export function getRequestConfig() {
|
|||
*/
|
||||
export function clearToken() {
|
||||
uni.removeStorageSync('token')
|
||||
uni.removeStorageSync('refreshToken')
|
||||
console.log('Token已清除')
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -380,6 +391,7 @@ export function clearToken() {
|
|||
*/
|
||||
export function setToken(token) {
|
||||
uni.setStorageSync('token', token)
|
||||
console.log('Token已设置')
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -391,91 +403,82 @@ export function getToken() {
|
|||
}
|
||||
|
||||
/**
|
||||
* 强制清除loading状态
|
||||
* 强制隐藏loading
|
||||
*/
|
||||
export function forceHideLoading() {
|
||||
isLoading = false
|
||||
// 清除超时定时器
|
||||
if (loadingTimer) {
|
||||
clearTimeout(loadingTimer)
|
||||
loadingTimer = null
|
||||
}
|
||||
try {
|
||||
isLoading = false
|
||||
loadingCount = 0
|
||||
if (loadingTimer) {
|
||||
clearTimeout(loadingTimer)
|
||||
loadingTimer = null
|
||||
}
|
||||
uni.hideLoading()
|
||||
} catch (error) {
|
||||
console.warn('强制清除loading失败:', error)
|
||||
console.warn('强制隐藏loading失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化全局loading管理
|
||||
* 初始化全局loading管理器
|
||||
*/
|
||||
export function initGlobalLoadingManager() {
|
||||
// 监听页面显示事件
|
||||
uni.$on('page-show', () => {
|
||||
forceHideLoading()
|
||||
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', () => {
|
||||
forceHideLoading()
|
||||
console.log('页面隐藏')
|
||||
})
|
||||
|
||||
// 监听应用进入前台
|
||||
// 监听应用显示事件
|
||||
uni.$on('app-show', () => {
|
||||
forceHideLoading()
|
||||
console.log('应用显示')
|
||||
})
|
||||
|
||||
// 监听应用进入后台
|
||||
// 监听应用隐藏事件
|
||||
uni.$on('app-hide', () => {
|
||||
console.log('应用隐藏,清除loading')
|
||||
forceHideLoading()
|
||||
})
|
||||
|
||||
console.log('全局loading管理器已初始化')
|
||||
}
|
||||
|
||||
/**
|
||||
* 页面级别的loading管理
|
||||
*/
|
||||
export class PageLoadingManager {
|
||||
// 简化的自动loading管理类
|
||||
export class AutoLoadingManager {
|
||||
constructor() {
|
||||
this.isLoading = false
|
||||
this.timer = null
|
||||
this.isActive = false
|
||||
}
|
||||
|
||||
// 显示loading(可选)
|
||||
show(text = '加载中...') {
|
||||
this.hide() // 先清除之前的loading
|
||||
this.isLoading = true
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: text,
|
||||
mask: true
|
||||
})
|
||||
// 设置超时
|
||||
this.timer = setTimeout(() => {
|
||||
console.warn('页面Loading超时,强制清除')
|
||||
this.hide()
|
||||
}, 30000)
|
||||
} catch (error) {
|
||||
console.warn('显示页面loading失败:', error)
|
||||
}
|
||||
this.isActive = true
|
||||
// 这里可以选择是否显示额外的loading
|
||||
// 默认情况下,所有API调用都会自动显示loading
|
||||
}
|
||||
|
||||
// 隐藏loading(可选)
|
||||
hide() {
|
||||
this.isLoading = false
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
try {
|
||||
uni.hideLoading()
|
||||
} catch (error) {
|
||||
console.warn('隐藏页面loading失败:', error)
|
||||
}
|
||||
this.isActive = false
|
||||
// 这里可以选择是否手动隐藏loading
|
||||
// 默认情况下,API调用完成后会自动隐藏loading
|
||||
}
|
||||
|
||||
// 页面卸载时清理
|
||||
// 销毁管理器
|
||||
destroy() {
|
||||
this.hide()
|
||||
this.isActive = false
|
||||
// 页面卸载时可以选择是否强制清除loading
|
||||
// forceHideLoading()
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user