mirror of
https://gitee.com/myxzgzs/boyue-ui-admin-uniapp
synced 2025-08-08 16:32:44 +08:00
37 lines
1.2 KiB
Vue
37 lines
1.2 KiB
Vue
<route lang="json5">
|
|
{
|
|
layout: 'demo',
|
|
style: {
|
|
navigationBarTitleText: '请求-状态一体化',
|
|
},
|
|
}
|
|
</route>
|
|
|
|
<template>
|
|
<view class="p-6 text-center">
|
|
<!-- http://localhost:9000/#/pages/index/request -->
|
|
<button @click="getFoo" class="my-6">测试 GET 请求</button>
|
|
<view class="text-xl">请求数据如下</view>
|
|
<view v-if="loading" class="text-blue h-10">加载中...</view>
|
|
<view v-else class="text-green h-10">{{ JSON.stringify(data) }}</view>
|
|
<button class="my-6" type="warn" @click="reset">一键清空数据</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { getFooAPI, IFooItem } from '@/service/index/foo'
|
|
import { httpGet } from '@/utils/http'
|
|
|
|
// 适合少部分全局性的接口————多个页面都需要的请求接口，额外编写一个 Service 层
|
|
// const { loading, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'), { immediate: true })
|
|
// 再次简化，一行代码搞定，方便一次性的请求，适用大部分请求
|
|
const { loading, data, run } = useRequest<IFooItem>(() => httpGet('/foo', { name: '菲鸽' }), {
|
|
immediate: true,
|
|
})
|
|
|
|
const getFoo = () => run()
|
|
const reset = () => {
|
|
data.value = undefined
|
|
}
|
|
</script>
|