github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-24 10:33:50 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(demo->useRequest): 更新useRequest 依赖 Effect 函数案例 (#3460)

Browse Source
This commit is contained in:
luocong2016 2023-12-25 17:00:01 +08:00 committed by GitHub
parent 1b763fceee
commit b57d9fc60d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 153 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
src/views/hooks/request/refresy-deps.tsx
View File

@ -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 () => (
<Card title="依赖刷新">
<Card title="Ref 依赖刷新">
<Typography>
<Typography.Paragraph>
useRequest 提供了一个
<Typography.Text type="danger"> options.refreshDeps </Typography.Text>
参数，当它的值变化后，会重新触发请求。
</Typography.Paragraph>
<Typography.Paragraph>
<Typography.Text>
<pre>
{`const select = ref('Lutz');
const { data, loading } = useRequest(() => imitateApi(select.value), {
refreshDeps: [select]
});`}
</pre>
</Typography.Text>
</Typography.Paragraph>
</Typography>
<Select v-model={[select.value, 'value']} options={options} style="width: 220px" />
<Select
v-model={[select.value, 'value']}
options={options}
style="width: 220px"
disabled={loading.value}
/>
<p>Username: {loading.value ? 'Loading' : unref(data)}</p>
</Card>
);
},
});
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 () => (
<Card title="Computed 依赖刷新" class="mt-2">
<Typography>
<Typography.Paragraph>
<Typography.Text type="danger"> options.refreshDeps </Typography.Text>
可以是计算类型
</Typography.Paragraph>
<Typography.Paragraph>
<Typography.Text>
<pre>
{`const numOrign = ref(1);
const changeNum = () => {
++numOrign.value;
};
const numComp = computed(() => numOrign.value * Math.PI);
const { data, loading } = useRequest(imitateApi, {
refreshDeps: [numComp]
});`}
</pre>
</Typography.Text>
</Typography.Paragraph>
</Typography>
<p>Username: {loading.value ? 'Loading' : unref(data)}</p>
<Button type="primary" onClick={changeNum} disabled={loading.value}>
changeNum
</Button>
</Card>
);
},
});
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 () => (
<Card title="Function 依赖刷新" class="mt-2">
<Typography>
<Typography.Paragraph>
<Typography.Text type="danger"> options.refreshDeps </Typography.Text>
可以是一个方法，但必须是一个关于响应型数据 Reactive、Ref、Computed 的 effect 函数
</Typography.Paragraph>
<Typography.Paragraph>
<Typography.Text>
<pre>
{`const status = reactive({ id: 'lutz' });
const changeStatus = () => {
status.id = status.id === 'LUTZ' ? 'lutz' : 'LUTZ';
};
const { data, loading } = useRequest(imitateApi, {
refreshDeps: [() => status.id]
});`}
</pre>
</Typography.Text>
</Typography.Paragraph>
</Typography>
<p>Username: {loading.value ? 'Loading' : unref(data)}</p>
<Button type="primary" onClick={changeStatus} disabled={loading.value}>
changeStatus
</Button>
</Card>
);
},
});
export default defineComponent({
setup() {
return () => (
<PageWrapper>
<PageWrapper
title="依赖刷新"
v-slots={{
headerContent: () => (
<Typography>
<Typography.Paragraph>
useRequest 提供了
<Typography.Text type="danger"> options.refreshDeps </Typography.Text>
参数，当它的值变化后，会重新触发请求。
</Typography.Paragraph>
<Typography.Paragraph>
<Typography.Text>
<pre>
{`import type { WatchSource } from 'vue';
// useRequestOption
refreshDeps?: WatchSource<any>[];
refreshDepsAction?: () => void; // 非手动执行, 默认执行 fetchInstance.refresh`}
</pre>
</Typography.Text>
</Typography.Paragraph>
</Typography>
),
}}
>
<Demo1 />
<Demo2 />
<Demo3 />
</PageWrapper>
);
},

24
src/views/hooks/request/retry.tsx
View File

@ -45,7 +45,29 @@ const Demo1 = defineComponent({
export default defineComponent({
setup() {
return () => (
<PageWrapper>
<PageWrapper
title="错误重试"
v-slots={{
headerContent: () => (
<Typography>
<Typography.Paragraph>
通过设置
<Typography.Text type="danger"> options.retryCount </Typography.Text>
，指定错误重试次数，则 useRequest 在失败后会进行重试。
</Typography.Paragraph>
<Typography.Paragraph>
<Typography.Text>
<pre>
{`// useRequestOption
retryCount?: number; // -1, 无限次重试
retryInterval?: number; // 重试时间间隔，单位为毫秒。如果不设置，默认采用简易的指数退避算法`}
</pre>
</Typography.Text>
</Typography.Paragraph>
</Typography>
),
}}
>
<Demo1 />
</PageWrapper>
);