Skip to content

Commit 909c3ca

Browse files
innoccesinnocces
committedJul 11, 2021
docs(userequest demos): add demos of useRequest
1 parent 97f6d0d commit 909c3ca

File tree

19 files changed

+409
-2
lines changed

19 files changed

+409
-2
lines changed
 

Diff for: ‎packages/app/src/app.config.ts

+6
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,12 @@ export default {
2121
'pages/useRequest/polling/index',
2222
'pages/useRequest/concurrent/index',
2323
'pages/useRequest/ready/index',
24+
'pages/useRequest/debounce/index',
25+
'pages/useRequest/throttle/index',
26+
'pages/useRequest/cacheKey/index',
27+
'pages/useRequest/preload/index',
28+
'pages/useRequest/refreshOnWindowFocus/index',
29+
// 'pages/useRequest/mutate/index',
2430
'pages/useNetworkType/index',
2531
'pages/useOnline/index',
2632
],

Diff for: ‎packages/app/src/app.less

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ page {
2626

2727
&__content {
2828
padding: 0 20px;
29+
position: relative;
2930

3031
&.no-padding {
3132
padding: 0;

Diff for: ‎packages/app/src/pages/useRequest/cacheKey/index.config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
navigationBarTitleText: 'useRequest 缓存 & SWR',
3+
};

Diff for: ‎packages/app/src/pages/useRequest/cacheKey/index.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/**
2+
* desc: 通过 `options.fetchKey` ，可以将请求进行分类，每一类的请求都有独立的状态，你可以在 `fetches` 中找到所有的请求。
3+
*/
4+
import React, { useState } from 'react';
5+
import { useRequest } from 'taro-hooks';
6+
import Mock from 'mockjs';
7+
8+
import { AtButton } from 'taro-ui';
9+
import { View } from '@tarojs/components';
10+
import DocPage from '@components/DocPage';
11+
12+
async function getArticle(): Promise<{ data: string; time: number }> {
13+
return new Promise((resolve) => {
14+
setTimeout(() => {
15+
resolve({
16+
data: Mock.mock('@cparagraph(10, 20)'),
17+
time: new Date().getTime(),
18+
});
19+
}, 1000);
20+
});
21+
}
22+
23+
const Article = () => {
24+
const { data, loading } = useRequest(getArticle, {
25+
cacheKey: 'article',
26+
});
27+
if (!data && loading) {
28+
return <View>loading</View>;
29+
}
30+
return (
31+
<>
32+
<View>Latest request time: {data?.time}</View>
33+
<View>{data?.data}</View>
34+
</>
35+
);
36+
};
37+
38+
const CacheKeyRequest = () => {
39+
const [state, setState] = useState<boolean>(false);
40+
41+
return (
42+
<DocPage title="useRequest 请求" panelTitle="缓存 & SWR">
43+
<View>
44+
You can click the button multiple times, the article component will show
45+
the cached data first.
46+
</View>
47+
<AtButton
48+
type="primary"
49+
onClick={() => setState(!state)}
50+
customStyle={{ marginTop: '10px' }}
51+
>
52+
show/hidden
53+
</AtButton>
54+
{state && <Article />}
55+
</DocPage>
56+
);
57+
};
58+
59+
export default CacheKeyRequest;

Diff for: ‎packages/app/src/pages/useRequest/concurrent/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { AtMessage, AtButton } from 'taro-ui';
99
import { View } from '@tarojs/components';
1010
import DocPage from '@components/DocPage';
1111

12+
import 'taro-ui/dist/style/components/icon.scss';
13+
1214
type Result = { success: boolean };
1315

1416
export function deleteUser(userId: string): Promise<Result> {

Diff for: ‎packages/app/src/pages/useRequest/debounce/index.config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
navigationBarTitleText: 'useRequest 防抖',
3+
};

Diff for: ‎packages/app/src/pages/useRequest/debounce/index.tsx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/**
2+
* desc: 通过设置 `options.debounceInterval` ，则进入防抖模式。此时如果频繁触发 `run` ，则会以防抖策略进行请求。
3+
*/
4+
import React, { useEffect, useState } from 'react';
5+
import { useRequest } from 'taro-hooks';
6+
import Mock from 'mockjs';
7+
8+
import { AtInput, AtList, AtListItem } from 'taro-ui';
9+
import { View } from '@tarojs/components';
10+
import DocPage from '@components/DocPage';
11+
12+
async function getEmail(search: string): Promise<string[]> {
13+
console.log(search);
14+
return new Promise((resolve) => {
15+
setTimeout(() => {
16+
resolve(Mock.mock({ 'data|5': ['@email()'] }).data);
17+
}, 300);
18+
});
19+
}
20+
21+
const DebounceRequest = () => {
22+
const { data, loading, run } = useRequest(getEmail, {
23+
debounceInterval: 500,
24+
manual: true,
25+
});
26+
27+
const [value, setValue] = useState<string>();
28+
29+
useEffect(() => {
30+
value && run(value);
31+
}, [value, run]);
32+
33+
return (
34+
<DocPage title="useRequest 请求" panelTitle="防抖">
35+
<View>Enter quickly to see the effect</View>
36+
<AtInput
37+
name="email"
38+
value={value}
39+
onChange={(e) => setValue(e as string)}
40+
placeholder="Select Emails"
41+
/>
42+
{loading ? (
43+
<View>loading...</View>
44+
) : (
45+
<AtList>
46+
{data && data.map((i: string) => <AtListItem key={i} title={i} />)}
47+
</AtList>
48+
)}
49+
</DocPage>
50+
);
51+
};
52+
53+
export default DebounceRequest;

Diff for: ‎packages/app/src/pages/useRequest/index.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,36 @@ const list: IListItem[] = [
3838
note: '只有当 options.ready 变为 true 时, 才会发起请求，基于该特性可以实现串行请求，依赖请求等。',
3939
route: 'ready',
4040
},
41+
{
42+
title: '防抖',
43+
note: '通过设置 options.debounceInterval ，则进入防抖模式。此时如果频繁触发 run ，则会以防抖策略进行请求。',
44+
route: 'debounce',
45+
},
46+
{
47+
title: '节流',
48+
note: '通过设置 options.throttleInterval ，则进入节流模式。此时如果频繁触发 run ，则会以节流策略进行请求。',
49+
route: 'throttle',
50+
},
51+
{
52+
title: '缓存 & SWR',
53+
note: '如果设置了 options.cacheKey ， useRequest 会将当前请求结束数据缓存起来。下次组件初始化时，如果有缓存数据，我们会优先返回缓存数据，然后在背后发送新请求，也就是 SWR 的能力。你可以通过 cacheTime 设置缓存数据回收时间，也可以通过 staleTime 设置数据保持新鲜时间。',
54+
route: 'cacheKey',
55+
},
56+
{
57+
title: '预加载',
58+
note: '同一个 cacheKey 的请求，是全局共享的，也就是你可以提前加载数据。利用该特性，可以很方便的实现预加载。',
59+
route: 'preload',
60+
},
61+
{
62+
title: '屏幕聚焦重新请求',
63+
note: '如果你设置了 options.refreshOnWindowFocus = true ，则在浏览器窗口 refocus 和 revisible 时，会重新发起请求。你可以通过设置 options.focusTimespan 来设置请求间隔，默认为 5000ms 。',
64+
route: 'refreshOnWindowFocus',
65+
},
66+
{
67+
title: '突变',
68+
note: '你可以通过 mutate ，直接修改 data 。 mutate 函数参数可以为 newData 或 (oldData)=> newData 。',
69+
route: 'mutate',
70+
},
4171
];
4272

4373
export default () => {

Diff for: ‎packages/app/src/pages/useRequest/manual/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import Taro from '@tarojs/taro';
88
import { AtMessage, AtInput, AtButton } from 'taro-ui';
99
import DocPage from '@components/DocPage';
1010

11+
import 'taro-ui/dist/style/components/icon.scss';
12+
1113
type Result = { success: boolean };
1214

1315
function changeUsername(username: string): Promise<Result> {

Diff for: ‎packages/app/src/pages/useRequest/mutate/index.config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
navigationBarTitleText: 'useRequest 突变',
3+
};

Diff for: ‎packages/app/src/pages/useRequest/mutate/index.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* desc: 你可以通过 `mutate` ，直接修改 `data` 。 `mutate` 函数参数可以为 `newData` 或 `(oldData)=> newData` 。
3+
*/
4+
import React, { useState } from 'react';
5+
import { useRequest } from 'taro-hooks';
6+
import Mock from 'mockjs';
7+
8+
import { AtInput, AtButton } from 'taro-ui';
9+
import { View } from '@tarojs/components';
10+
import DocPage from '@components/DocPage';
11+
12+
import 'taro-ui/dist/style/components/icon.scss';
13+
14+
function getUsername(): Promise<string> {
15+
return new Promise((resolve) => {
16+
setTimeout(() => {
17+
resolve(Mock.mock('@name()'));
18+
}, 1000);
19+
});
20+
}
21+
22+
const MutateRequest = () => {
23+
const [state, setState] = useState('');
24+
const { data, mutate, loading } = useRequest(getUsername, {
25+
onSuccess: (result: string) => {
26+
setState(result);
27+
},
28+
});
29+
30+
return (
31+
<DocPage title="useRequest 请求" panelTitle="突变">
32+
<View>username: {data}</View>
33+
<AtInput
34+
name="username"
35+
onChange={(e) => setState(e as string)}
36+
value={state}
37+
placeholder="Please enter username"
38+
/>
39+
<AtButton type="primary" loading={loading} onClick={() => mutate(state)}>
40+
{loading ? 'loading' : 'Edit'}
41+
</AtButton>
42+
</DocPage>
43+
);
44+
};
45+
46+
export default MutateRequest;

Diff for: ‎packages/app/src/pages/useRequest/preload/index.config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
navigationBarTitleText: 'useRequest 预加载',
3+
};

Diff for: ‎packages/app/src/pages/useRequest/preload/index.tsx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
* desc: 同一个 `cacheKey` 的请求，是全局共享的，也就是你可以提前加载数据。利用该特性，可以很方便的实现预加载。
3+
*/
4+
import React, { useEffect, useState } from 'react';
5+
import { useRequest } from 'taro-hooks';
6+
import Mock from 'mockjs';
7+
8+
import { AtButton } from 'taro-ui';
9+
import { View } from '@tarojs/components';
10+
import DocPage from '@components/DocPage';
11+
12+
async function getArticle(): Promise<{ data: string; time: number }> {
13+
return new Promise((resolve) => {
14+
setTimeout(() => {
15+
resolve({
16+
data: Mock.mock('@cparagraph(10, 20)'),
17+
time: new Date().getTime(),
18+
});
19+
}, 1000);
20+
});
21+
}
22+
23+
const Article = () => {
24+
const { data, loading } = useRequest(getArticle, {
25+
cacheKey: 'article',
26+
});
27+
if (!data && loading) {
28+
return <View>loading</View>;
29+
}
30+
return (
31+
<>
32+
<View>Latest request time: {data?.time}</View>
33+
<View>{data?.data}</View>
34+
</>
35+
);
36+
};
37+
38+
const PreloadRequest = () => {
39+
const [state, setState] = useState<boolean>(false);
40+
const { run } = useRequest(getArticle, {
41+
cacheKey: 'article',
42+
manual: true,
43+
});
44+
45+
useEffect(() => {
46+
if (!state) {
47+
run();
48+
}
49+
}, [state, run]);
50+
51+
return (
52+
<DocPage title="useRequest 请求" panelTitle="预加载">
53+
<View>When the article hidden, the article data is preloaded.</View>
54+
<AtButton
55+
type="primary"
56+
onClick={() => setState(!state)}
57+
customStyle={{ marginTop: '10px' }}
58+
>
59+
show/hidden
60+
</AtButton>
61+
{state && <Article />}
62+
</DocPage>
63+
);
64+
};
65+
66+
export default PreloadRequest;

Diff for: ‎packages/app/src/pages/useRequest/refreshOnWindowFocus/index.config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
navigationBarTitleText: 'useRequest 屏幕聚焦重新请求',
3+
};

Diff for: ‎packages/app/src/pages/useRequest/refreshOnWindowFocus/index.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* desc: 只有当 `options.ready` 变为 true 时, 才会发起请求，基于该特性可以实现串行请求，依赖请求等。
3+
*/
4+
import React from 'react';
5+
import { useRequest } from 'taro-hooks';
6+
import Mock from 'mockjs';
7+
8+
import { View } from '@tarojs/components';
9+
import { AtActivityIndicator } from 'taro-ui';
10+
import DocPage from '@components/DocPage';
11+
12+
import 'taro-ui/dist/style/components/loading.scss';
13+
14+
function getUsername(): Promise<string> {
15+
const userInfo = Mock.mock('@name()');
16+
return new Promise((resolve) => {
17+
setTimeout(() => {
18+
resolve(userInfo);
19+
}, 1000);
20+
});
21+
}
22+
23+
const RefreshOnWindowFocusRequest = () => {
24+
const { data, loading } = useRequest(getUsername, {
25+
refreshOnWindowFocus: true,
26+
});
27+
28+
return (
29+
<DocPage title="useRequest 请求" panelTitle="屏幕聚焦重新请求">
30+
<View>
31+
You can try to click elsewhere and click back to try. (Or hide the page
32+
and show it again)
33+
</View>
34+
<AtActivityIndicator
35+
mode="center"
36+
isOpened={loading}
37+
></AtActivityIndicator>
38+
<View>Username: {data}</View>
39+
</DocPage>
40+
);
41+
};
42+
43+
export default RefreshOnWindowFocusRequest;

Diff for: ‎packages/app/src/pages/useRequest/throttle/index.config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
navigationBarTitleText: 'useRequest 节流',
3+
};

0 commit comments

Comments
 (0)