feat(api): 添加alova-foo接口并重构alova页面调用

将alova接口调用逻辑抽离到api目录，便于复用和维护

src/api/alova-foo.ts

@@ -0,0 +1,12 @@
+// alovaJS 还在整理中，有比较熟悉的开发者可以PR一下，省得我去摸索
+import { http } from '@/utils/request/alova'
+
+export function foo() {
+  return http.Get('/foo', {
+    params: {
+      name: '菲鸽',
+      page: 1,
+      pageSize: 10,
+    },
+  })
+}

src/pages/about/about.vue

@@ -38,7 +38,7 @@ function gotoAlova() {
     </view>
     <RequestComp />
     <UploadComp />
-    <button @click="gotoAlova">
+    <button class="w-200px text-green" @click="gotoAlova">
       前往 alova 页面
     </button>
   </view>

src/pages/about/alova.vue

@@ -9,19 +9,10 @@
 
 <script lang="ts" setup>
 import { useRequest } from 'alova/client'
-import { http } from '@/utils/request/alova'
+import { foo } from '@/api/alova-foo'
 
 const initialData = undefined
-function list() {
-  return http.Get('/foo', {
-    params: {
-      name: '菲鸽',
-      page: 1,
-      pageSize: 10,
-    },
-  })
-}
-const { loading, data, send } = useRequest(list, {
+const { loading, data, send } = useRequest(foo, {
   initialData,
   immediate: true,
 })