通过request访问loading
This commit is contained in:
minimaxagent1
parent
1b64f0f02f
commit
d2fe5062ad
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/loading-manager.js'
|
||||
import { initGlobalLoadingManager } from '@/utils/request.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, AutoLoadingManager } from "../../utils/loading-manager.js";
|
||||
import { forceHideLoading, AutoLoadingManager } from "../../utils/request.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
|
|||
137
pages/test/import-test.vue
Normal file
137
pages/test/import-test.vue
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<view class="import-test">
|
||||
<view class="test-section">
|
||||
<text class="section-title">导入修复测试</text>
|
||||
<text class="description">测试loading管理器的导入是否正常</text>
|
||||
|
||||
<button @click="testImport" class="test-btn">测试导入</button>
|
||||
<button @click="testLoading" class="test-btn">测试Loading功能</button>
|
||||
</view>
|
||||
|
||||
<view class="result-section">
|
||||
<text class="section-title">测试结果</text>
|
||||
<text class="result-text">{{ testResult }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
showLoading,
|
||||
hideLoading,
|
||||
forceHideLoading,
|
||||
getLoadingStatus,
|
||||
getLoadingConfig,
|
||||
initGlobalLoadingManager,
|
||||
AutoLoadingManager
|
||||
} from '@/utils/request.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
testResult: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 测试导入
|
||||
testImport() {
|
||||
try {
|
||||
this.testResult = '正在测试导入...'
|
||||
|
||||
// 测试所有导入的函数
|
||||
const functions = {
|
||||
showLoading: typeof showLoading,
|
||||
hideLoading: typeof hideLoading,
|
||||
forceHideLoading: typeof forceHideLoading,
|
||||
getLoadingStatus: typeof getLoadingStatus,
|
||||
getLoadingConfig: typeof getLoadingConfig,
|
||||
initGlobalLoadingManager: typeof initGlobalLoadingManager,
|
||||
AutoLoadingManager: typeof AutoLoadingManager
|
||||
}
|
||||
|
||||
console.log('导入的函数类型:', functions)
|
||||
|
||||
// 检查是否都是函数
|
||||
const allFunctions = Object.values(functions).every(type => type === 'function')
|
||||
|
||||
if (allFunctions) {
|
||||
this.testResult = '✅ 所有导入成功！\n' + JSON.stringify(functions, null, 2)
|
||||
} else {
|
||||
this.testResult = '❌ 部分导入失败！\n' + JSON.stringify(functions, null, 2)
|
||||
}
|
||||
} catch (error) {
|
||||
this.testResult = '❌ 导入测试失败: ' + error.message
|
||||
}
|
||||
},
|
||||
|
||||
// 测试Loading功能
|
||||
testLoading() {
|
||||
try {
|
||||
this.testResult = '正在测试Loading功能...'
|
||||
|
||||
// 测试基础功能
|
||||
showLoading('测试Loading...')
|
||||
|
||||
setTimeout(() => {
|
||||
hideLoading()
|
||||
|
||||
// 检查状态
|
||||
const status = getLoadingStatus()
|
||||
const config = getLoadingConfig()
|
||||
|
||||
this.testResult = '✅ Loading功能测试成功！\n' +
|
||||
'状态: ' + JSON.stringify(status, null, 2) + '\n' +
|
||||
'配置: ' + JSON.stringify(config, null, 2)
|
||||
}, 2000)
|
||||
|
||||
} catch (error) {
|
||||
this.testResult = '❌ Loading功能测试失败: ' + error.message
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.import-test {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.test-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;
|
||||
}
|
||||
|
||||
.test-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>
|
||||
141
pages/test/loading-manager-test.vue
Normal file
141
pages/test/loading-manager-test.vue
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<template>
|
||||
<view class="loading-manager-test">
|
||||
<view class="test-section">
|
||||
<text class="section-title">Loading管理器测试</text>
|
||||
<text class="description">测试抽离后的Loading管理器功能</text>
|
||||
|
||||
<button @click="testBasicLoading" class="test-btn">基础Loading测试</button>
|
||||
<button @click="testConcurrentLoading" class="test-btn">并发请求测试</button>
|
||||
<button @click="testCustomConfig" class="test-btn">自定义配置测试</button>
|
||||
<button @click="testStatusMonitoring" class="test-btn">状态监控测试</button>
|
||||
<button @click="testPageLoading" class="test-btn">页面Loading测试</button>
|
||||
<button @click="testErrorHandling" class="test-btn">错误处理测试</button>
|
||||
<button @click="testCompleteWorkflow" class="test-btn">完整流程测试</button>
|
||||
</view>
|
||||
|
||||
<view class="result-section">
|
||||
<text class="section-title">测试结果</text>
|
||||
<text class="result-text">{{ testResult }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { loadingExamples } from '@/utils/loading-example.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
testResult: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 基础Loading测试
|
||||
testBasicLoading() {
|
||||
this.testResult = '正在测试基础Loading...'
|
||||
loadingExamples.basicLoadingExample()
|
||||
setTimeout(() => {
|
||||
this.testResult = '基础Loading测试完成，请查看控制台'
|
||||
}, 3000)
|
||||
},
|
||||
|
||||
// 并发请求测试
|
||||
testConcurrentLoading() {
|
||||
this.testResult = '正在测试并发请求Loading...'
|
||||
loadingExamples.concurrentLoadingExample()
|
||||
setTimeout(() => {
|
||||
this.testResult = '并发请求测试完成，请查看控制台'
|
||||
}, 3000)
|
||||
},
|
||||
|
||||
// 自定义配置测试
|
||||
testCustomConfig() {
|
||||
this.testResult = '正在测试自定义配置...'
|
||||
loadingExamples.customConfigExample()
|
||||
setTimeout(() => {
|
||||
this.testResult = '自定义配置测试完成，请查看控制台'
|
||||
}, 4000)
|
||||
},
|
||||
|
||||
// 状态监控测试
|
||||
testStatusMonitoring() {
|
||||
this.testResult = '正在测试状态监控...'
|
||||
loadingExamples.statusMonitoringExample()
|
||||
setTimeout(() => {
|
||||
this.testResult = '状态监控测试完成，请查看控制台'
|
||||
}, 3000)
|
||||
},
|
||||
|
||||
// 页面Loading测试
|
||||
testPageLoading() {
|
||||
this.testResult = '正在测试页面Loading...'
|
||||
loadingExamples.pageLoadingExample()
|
||||
setTimeout(() => {
|
||||
this.testResult = '页面Loading测试完成，请查看控制台'
|
||||
}, 4000)
|
||||
},
|
||||
|
||||
// 错误处理测试
|
||||
testErrorHandling() {
|
||||
this.testResult = '正在测试错误处理...'
|
||||
loadingExamples.errorHandlingExample()
|
||||
setTimeout(() => {
|
||||
this.testResult = '错误处理测试完成，请查看控制台'
|
||||
}, 2000)
|
||||
},
|
||||
|
||||
// 完整流程测试
|
||||
testCompleteWorkflow() {
|
||||
this.testResult = '正在测试完整流程...'
|
||||
loadingExamples.completeWorkflowExample()
|
||||
setTimeout(() => {
|
||||
this.testResult = '完整流程测试完成，请查看控制台'
|
||||
}, 4000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.loading-manager-test {
|
||||
padding: 40rpx;
|
||||
}
|
||||
|
||||
.test-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;
|
||||
}
|
||||
|
||||
.test-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>
|
||||
|
|
@ -5,7 +5,13 @@ import {
|
|||
hideLoading,
|
||||
forceHideLoading,
|
||||
initGlobalLoadingManager,
|
||||
config as loadingConfig
|
||||
config as loadingConfig,
|
||||
getLoadingStatus,
|
||||
setLoadingConfig,
|
||||
getLoadingConfig,
|
||||
showLoadingWithDelay,
|
||||
hideLoadingWithDelay,
|
||||
AutoLoadingManager
|
||||
} from './loading-manager.js'
|
||||
|
||||
// 环境配置
|
||||
|
|
@ -348,4 +354,27 @@ export function getToken() {
|
|||
return uni.getStorageSync('token')
|
||||
}
|
||||
|
||||
// 导出loading相关函数，作为统一入口
|
||||
export {
|
||||
// 基础loading函数
|
||||
showLoading,
|
||||
hideLoading,
|
||||
forceHideLoading,
|
||||
|
||||
// 高级loading函数
|
||||
showLoadingWithDelay,
|
||||
hideLoadingWithDelay,
|
||||
|
||||
// 状态和配置管理
|
||||
getLoadingStatus,
|
||||
setLoadingConfig,
|
||||
getLoadingConfig,
|
||||
|
||||
// 全局初始化
|
||||
initGlobalLoadingManager,
|
||||
|
||||
// 自动loading管理器类
|
||||
AutoLoadingManager
|
||||
}
|
||||
|
||||
// Loading管理相关函数已从loading-manager.js导入
|
||||
Loading…
Reference in New Issue
Block a user