feat(请求): 添加请求取消功能并修改示例页面

在 listAll 服务中添加延迟以测试取消功能
在示例页面添加取消按钮并修改请求方法

src/pages/about/components/request-openapi.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { UserItem } from '@/service'
-import { infoUsingGet } from '@/service/info'
+import { infoUsingGet, listAllUsingGet } from '@/service'
 
 const loading = ref(false)
 const error = ref<Error | null>(null)
@@ -22,7 +22,7 @@ async function getUserInfo() {
     loading.value = false
   }
 }
-const { data: data2, loading: loading2, run } = useRequest(() => infoUsingGet({}), {
+const { data: data2, loading: loading2, run, cancel } = useRequest(() => listAllUsingGet({}), {
   immediate: false,
 })
 </script>
@@ -46,16 +46,19 @@ const { data: data2, loading: loading2, run } = useRequest(() => infoUsingGet({}
     <view class="my-4 text-center">
       2)直接使用 openapi + useRequest 生成的请求
     </view>
-    <view class="my-4 text-center">
+    <view class="my-4 flex items-center gap-2 text-center">
       <button type="primary" size="mini" class="w-160px" @click="run">
         发送请求
       </button>
-      <view class="text-xl">
-        请求数据如下
-      </view>
-      <view class="text-green leading-8">
-        {{ JSON.stringify(data2) }}
-      </view>
+      <button type="default" size="mini" class="w-160px" @click="cancel">
+        取消请求
+      </button>
+    </view>
+    <view class="text-xl">
+      请求数据如下
+    </view>
+    <view class="text-green leading-8">
+      {{ JSON.stringify(data2) }}
     </view>
   </view>
 </template>

src/service/listAll.ts

@@ -4,6 +4,7 @@ import request from '@/http/vue-query';
 import { CustomRequestOptions } from '@/http/types';
 
 import * as API from './types';
+const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
 /** 用户列表 GET /user/listAll */
 export async function listAllUsingGet({
@@ -11,6 +12,7 @@ export async function listAllUsingGet({
 }: {
   options?: CustomRequestOptions;
 }) {
+  await sleep(2000); // 方便测试 cancel 功能
   return request<API.UserItem[]>('/user/listAll', {
     method: 'GET',
     ...(options || {}),