<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>
