diff --git a/src/api/alova-foo.ts b/src/api/alova-foo.ts
new file mode 100644
index 0000000..13852ef
--- /dev/null
+++ b/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,
+    },
+  })
+}
diff --git a/src/pages/about/about.vue b/src/pages/about/about.vue
index 396e273..cae6fba 100644
--- a/src/pages/about/about.vue
+++ b/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>
diff --git a/src/pages/about/alova.vue b/src/pages/about/alova.vue
index fada4e6..6e7bcae 100644
--- a/src/pages/about/alova.vue
+++ b/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,
 })