From 7fa2578e6d578e7ab44793fcb2b41189a7ba9af3 Mon Sep 17 00:00:00 2001
From: luocong2016 <luocong2016@126.com>
Date: Mon, 25 Dec 2023 14:31:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(demo->useRequest):=20=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF=E9=87=8D=E8=AF=95=E7=A4=BA=E4=BE=8B=20(#3456?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/feat/request-demo/index.vue | 73 ++++++++++++++++++++--
 1 file changed, 69 insertions(+), 4 deletions(-)

diff --git a/src/views/demo/feat/request-demo/index.vue b/src/views/demo/feat/request-demo/index.vue
index 474d8b08..4bf5647b 100644
--- a/src/views/demo/feat/request-demo/index.vue
+++ b/src/views/demo/feat/request-demo/index.vue
@@ -1,13 +1,78 @@
 <template>
-  <div class="m-10">
-    <a-button @click="handleClick" type="primary"> 点击会重新发起请求5次 </a-button>
-    <p class="mt-4">打开浏览器的network面板，可以看到发出了六次请求</p>
-  </div>
+  <PageWrapper title="错误重试">
+    <Row :gutter="16">
+      <Col :span="8">
+        <Card title="Axios 错误重试">
+          <a-button @click="handleClick" type="primary"> 点击会重新发起请求5次 </a-button>
+          <div class="mt-4">打开浏览器的 network 面板，可以看到发出了六次请求</div>
+        </Card>
+      </Col>
+      <Col :span="8">
+        <Card title="hooks 错误重试">
+          <Space>
+            <a-button @click="restRun" type="primary" :disabled="loading">
+              使用 hooks 发起重试
+            </a-button>
+            <a-button @click="restCancel">取消</a-button>
+          </Space>
+          <div class="mt-4"
+            >错误重试，retryInterval 如果不设置，默认采用简易的指数退避算法，取 1000 * 2 **
+            retryCount，也就是第一次重试等待 2s，第二次重试等待 4s，以此类推，如果大于 30s，则取 30s
+          </div>
+        </Card>
+      </Col>
+    </Row>
+  </PageWrapper>
 </template>
+
 <script lang="ts" setup>
+  import { PageWrapper } from '@/components/Page';
+  import { useRequest } from '@vben/hooks';
   import { testRetry } from '@/api/sys/user';
+  import { Card, Col, Row, Space, message } from 'ant-design-vue';
+
   // @ts-ignore
   const handleClick = async () => {
     await testRetry();
   };
+
+  function apiError() {
+    return new Promise<void>((resolve, reject) => {
+      setTimeout(() => {
+        reject(`TimeError: ${Date.now()}`);
+      }, 1300);
+    });
+  }
+
+  // PS >> useRequest 代替不了API(如: axios)，但它使得开发更灵活
+
+  // 使得重试不再局限于 API 请求，兼容扩展和继续封装
+  // 继续封装，如：useRequest 第一个参数，可以嵌套多个异步函数
+  // 兼容扩展，如：同时启用防抖、节流、loading状态、取消异步等功能
+
+  // eg. 仅仅为了计数，restRun、restCancel 其实都可省略
+  let i = 0;
+  const { loading, run, cancel } = useRequest(apiError, {
+    manual: true,
+    retryCount: 5,
+    // retryInterval: undefined, // 重试时间间隔，单位为毫秒
+    onError(error) {
+      if (i === 0) {
+        message.error(`发现错误`);
+        i++;
+      }
+      const now = Date.now();
+      message.error(`第 ${i++} 次重试, Time:${now}`);
+      console.log(`Time: ${now}, Error: ${error}`);
+    },
+  });
+  const restRun = () => {
+    i = 0;
+    run();
+  };
+  const restCancel = () => {
+    i = 0;
+    cancel();
+    message.info('已取消');
+  };
 </script>