From b57d9fc60dd113607cd381dff1f88c47671fc434 Mon Sep 17 00:00:00 2001 From: luocong2016 Date: Mon, 25 Dec 2023 17:00:01 +0800 Subject: [PATCH] =?UTF-8?q?feat(demo->useRequest):=20=E6=9B=B4=E6=96=B0use?= =?UTF-8?q?Request=20=E4=BE=9D=E8=B5=96=20Effect=20=E5=87=BD=E6=95=B0?= =?UTF-8?q?=E6=A1=88=E4=BE=8B=20(#3460)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/hooks/request/refresy-deps.tsx | 135 ++++++++++++++++++++++- src/views/hooks/request/retry.tsx | 24 +++- 2 files changed, 153 insertions(+), 6 deletions(-) diff --git a/src/views/hooks/request/refresy-deps.tsx b/src/views/hooks/request/refresy-deps.tsx index 2c9dd74c0..3cf27af87 100644 --- a/src/views/hooks/request/refresy-deps.tsx +++ b/src/views/hooks/request/refresy-deps.tsx @@ -1,5 +1,5 @@ -import { defineComponent, ref, unref } from 'vue'; -import { Card, Typography, Select } from 'ant-design-vue'; +import { computed, defineComponent, reactive, ref, unref } from 'vue'; +import { Button, Card, Typography, Select } from 'ant-design-vue'; import { imitateApi } from './mock-api'; import { useRequest } from '@vben/hooks'; import { PageWrapper } from '@/components/Page'; @@ -16,27 +16,152 @@ const Demo1 = defineComponent({ const { data, loading } = useRequest(() => imitateApi(select.value), { refreshDeps: [select] }); return () => ( - + useRequest 提供了一个 options.refreshDeps 参数，当它的值变化后，会重新触发请求。 + + + 
+                {`const select = ref('Lutz');
+const { data, loading } = useRequest(() => imitateApi(select.value), {
+  refreshDeps: [select]
+});`}
+
+ + -

Username: {loading.value ? 'Loading' : unref(data)}

 ); }, }); +const Demo2 = defineComponent({ + setup() { + const numOrign = ref(1); + const changeNum = () => { + ++numOrign.value; + }; + const numComp = computed(() => numOrign.value * Math.PI); + + const { data, loading } = useRequest(imitateApi, { refreshDeps: [numComp] }); + + return () => ( + + + + options.refreshDeps + 可以是计算类型 + + + + 
+                {`const numOrign = ref(1);
+const changeNum = () => {
+  ++numOrign.value;
+};
+const numComp = computed(() => numOrign.value * Math.PI);
+
+const { data, loading } = useRequest(imitateApi, {
+  refreshDeps: [numComp]
+});`}
+
+ + + + +

Username: {loading.value ? 'Loading' : unref(data)}

+ + + ); + }, +}); + +const Demo3 = defineComponent({ + setup() { + const status = reactive({ id: 'lutz' }); + const changeStatus = () => { + status.id = status.id === 'LUTZ' ? 'lutz' : 'LUTZ'; + }; + const { data, loading } = useRequest(imitateApi, { refreshDeps: [() => status.id] }); + + return () => ( + + + + options.refreshDeps + 可以是一个方法，但必须是一个关于响应型数据 Reactive、Ref、Computed 的 effect 函数 + + + + + 
+                {`const status = reactive({ id: 'lutz' });
+const changeStatus = () => {
+  status.id = status.id === 'LUTZ' ? 'lutz' : 'LUTZ';
+};
+
+const { data, loading } = useRequest(imitateApi, {
+  refreshDeps: [() => status.id]
+});`}
+
+ + + + +

Username: {loading.value ? 'Loading' : unref(data)}

+ + + ); + }, +}); + export default defineComponent({ setup() { return () => ( - + ( + + + useRequest 提供了 + options.refreshDeps + 参数，当它的值变化后，会重新触发请求。 + + + + 
+                    {`import type { WatchSource } from 'vue';
+
+// useRequestOption
+refreshDeps?: WatchSource[];
+refreshDepsAction?: () => void; // 非手动执行, 默认执行 fetchInstance.refresh`}
+
+ + + + ), + }} + > + + ); }, diff --git a/src/views/hooks/request/retry.tsx b/src/views/hooks/request/retry.tsx index 3f98194f3..f4d633ae5 100644 --- a/src/views/hooks/request/retry.tsx +++ b/src/views/hooks/request/retry.tsx @@ -45,7 +45,29 @@ const Demo1 = defineComponent({ export default defineComponent({ setup() { return () => ( - + ( + + + 通过设置 + options.retryCount + ，指定错误重试次数，则 useRequest 在失败后会进行重试。 + + + + 
+                    {`// useRequestOption
+retryCount?: number; // -1, 无限次重试
+retryInterval?: number; // 重试时间间隔，单位为毫秒。如果不设置，默认采用简易的指数退避算法`}
+
+ + + + ), + }} + > );