119 lines
3.1 KiB
Vue
119 lines
3.1 KiB
Vue
<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> |