From 7b37bccd98d52be697aaa7c62301e3ff094c7843 Mon Sep 17 00:00:00 2001
From: feige996 <1020102647@qq.com>
Date: Tue, 23 Sep 2025 18:24:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E8=AF=B7=E6=B1=82):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=AF=B7=E6=B1=82=E5=8F=96=E6=B6=88=E5=8A=9F=E8=83=BD=E5=B9=B6?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=A4=BA=E4=BE=8B=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在 listAll 服务中添加延迟以测试取消功能
在示例页面添加取消按钮并修改请求方法
---
 .../about/components/request-openapi.vue      | 21 +++++++++++--------
 src/service/listAll.ts                        |  2 ++
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/pages/about/components/request-openapi.vue b/src/pages/about/components/request-openapi.vue
index 821ad6b..9ce6bae 100644
--- a/src/pages/about/components/request-openapi.vue
+++ b/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>
diff --git a/src/service/listAll.ts b/src/service/listAll.ts
index bcbd21b..2caddd9 100644
--- a/src/service/listAll.ts
+++ b/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 || {}),