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,16 @@ import { getFooAPI, postFooAPI, IFooItem } from '@/service/index/foo'
 
 const recommendUrl = ref('http://laf.run/signup?code=ohaOgIX')
 
+// const initialData = {
+//   name: 'initialData',
+//   id: '1234',
+// }
+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>