feat: initialData

src/hooks/useRequest.ts

@@ -1,3 +1,5 @@
+import { UnwrapRef } from 'vue'
+
 type IUseRequestOptions<T> = {
  /** 是否立即执行，如果是则在onLoad执行 */
  immediate?: boolean
@@ -19,12 +21,12 @@ export default function useRequest<T>(
 ) {
  const loading = ref(false)
  const error = ref(false)
- const data = ref<T>()
+ const data = ref<T>(options.initialData)
  const run = async () => {
  loading.value = true
  func()
  .then((res) => {
- data.value = res.data
+ data.value = res.data as UnwrapRef<T>
  error.value = false
  })
  .catch((err) => {

src/pages/about/components/request.vue

@@ -24,9 +24,14 @@
 
  <!-- http://localhost:9000/#/pages/index/request -->
  <wd-button @click="run" class="my-6">发送请求</wd-button>
- <view class="text-xl">请求数据如下</view>
- <view class="text-green h-6">{{ JSON.stringify(data) }}</view>
- <wd-button type="error" @click="reset" class="my-6">清除数据</wd-button>
+ <view class="h-12">
+ <view v-if="loading">loading...</view>
+ <block v-else>
+ <view class="text-xl">请求数据如下</view>
+ <view class="text-green leading-8">{{ JSON.stringify(data) }}</view>
+ </block>
+ </view>
+ <wd-button type="error" @click="reset" class="my-6" :disabled="!data">重置数据</wd-button>
  </view>
 </template>
 
@@ -35,9 +40,12 @@ import { getFooAPI, postFooAPI, IFooItem } from '@/service/index/foo'
 
 const recommendUrl = ref('http://laf.run/signup?code=ohaOgIX')
 
+const initialData = undefined
 // 适合少部分全局性的接口————多个页面都需要的请求接口，额外编写一个 Service 层
-const { loading, error, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'))
+const { loading, error, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'), {
+ initialData,
+})
 const reset = () => {
- data.value = undefined
+ data.value = initialData
 }
 </script>