Skip to content

Commit 2ed7f05

Browse files
innoccesinnocces
committed
docs(userequest): add custom request to docs
1 parent 909c3ca commit 2ed7f05

File tree

12 files changed

+255
-1
lines changed

12 files changed

+255
-1
lines changed

‎packages/app/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@
4141
"@tarojs/react": "3.2.15",
4242
"@tarojs/runtime": "3.2.15",
4343
"@tarojs/taro": "3.2.15",
44+
"axios": "^0.21.1",
45+
"axios-miniprogram-adapter": "^0.3.2",
4446
"lodash": "4.17.15",
4547
"mockjs": "^1.1.0",
4648
"react": "^17.0.2",

‎packages/app/src/app.config.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,11 @@ export default {
2626
'pages/useRequest/cacheKey/index',
2727
'pages/useRequest/preload/index',
2828
'pages/useRequest/refreshOnWindowFocus/index',
29-
// 'pages/useRequest/mutate/index',
29+
'pages/useRequest/mutate/index',
30+
'pages/useRequest/loadingDelay/index',
31+
'pages/useRequest/refreshDeps/index',
32+
'pages/useRequest/fetch/index',
33+
'pages/useRequest/axios/index',
3034
'pages/useNetworkType/index',
3135
'pages/useOnline/index',
3236
],

‎packages/app/src/pages/useRequest/axios/index.config.ts

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

‎packages/app/src/pages/useRequest/axios/index.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* desc: 通过设置 `requstMethod`, 可以使用自己的请求库。
3+
*/
4+
import React from 'react';
5+
import { useRequest } from 'taro-hooks';
6+
import axios from 'axios/dist/axios.min.js';
7+
import adapter from 'axios-miniprogram-adapter';
8+
9+
import { View } from '@tarojs/components';
10+
import DocPage from '@components/DocPage';
11+
12+
const requestMethod = axios.create(
13+
process.env.TARO_ENV === 'h5'
14+
? {}
15+
: {
16+
adapter,
17+
},
18+
);
19+
20+
const MethodRequest = () => {
21+
const { data, error, loading } = useRequest(
22+
'https://run.mocky.io/v3/cd8e3926-740c-4a2c-ab80-45c0c4fe8dd2',
23+
{
24+
requestMethod: (param: any) => requestMethod(param),
25+
},
26+
);
27+
28+
return (
29+
<DocPage title="useRequest requstMethod" panelTitle="requstMethod">
30+
<View>
31+
{error
32+
? 'failed to load'
33+
: loading
34+
? 'loading...'
35+
: 'responese:' + JSON.stringify(data?.data)}
36+
</View>
37+
</DocPage>
38+
);
39+
};
40+
41+
export default MethodRequest;

‎packages/app/src/pages/useRequest/fetch/index.config.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default {
2+
navigationBarTitleText: 'useRequest 默认请求库',
3+
};

‎packages/app/src/pages/useRequest/fetch/index.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* desc: 如果 useRequest 第一个参数是 `string`、`object` 或 `()=> string|object`，则默认使用 Taro.request 发送网络请求
3+
*/
4+
import React from 'react';
5+
import { useRequest } from 'taro-hooks';
6+
7+
import { View } from '@tarojs/components';
8+
import DocPage from '@components/DocPage';
9+
10+
const FetchRequest = () => {
11+
const { data, error, loading } = useRequest(
12+
'https://run.mocky.io/v3/cd8e3926-740c-4a2c-ab80-45c0c4fe8dd2',
13+
);
14+
15+
return (
16+
<DocPage title="useRequest 默认请求库" panelTitle="默认请求库">
17+
<View>
18+
{error
19+
? 'failed to load'
20+
: loading
21+
? 'loading...'
22+
: 'responese:' + JSON.stringify(data?.data)}
23+
</View>
24+
</DocPage>
25+
);
26+
};
27+
28+
export default FetchRequest;

‎packages/app/src/pages/useRequest/index.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,26 @@ const list: IListItem[] = [
6868
note: '你可以通过 mutate ，直接修改 data 。 mutate 函数参数可以为 newData 或 (oldData)=> newData 。',
6969
route: 'mutate',
7070
},
71+
{
72+
title: 'Loading Delay',
73+
note: '通过设置 options.loadingDelay ，可以延迟 loading 变成 true 的时间，有效防止闪烁。',
74+
route: 'loadingDelay',
75+
},
76+
{
77+
title: 'refreshDeps',
78+
note: '当 options.refreshDeps 变化时，useRequest 会使用之前的参数重新执行 service。',
79+
route: 'refreshDeps',
80+
},
81+
{
82+
title: '默认请求库',
83+
note: '如果 useRequest 第一个参数是 string、object 或 ()=> string|object，则默认使用 Taro.request 发送网络请求',
84+
route: 'fetch',
85+
},
86+
{
87+
title: '集成请求库',
88+
note: '通过设置 requstMethod, 可以使用自己的请求库。',
89+
route: 'axios',
90+
},
7191
];
7292

7393
export default () => {

‎packages/app/src/pages/useRequest/loadingDelay/index.config.ts

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

‎packages/app/src/pages/useRequest/loadingDelay/index.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/**
2+
* desc: 通过设置 `options.loadingDelay` ，可以延迟 `loading` 变成 `true` 的时间，有效防止闪烁。
3+
*/
4+
import React from 'react';
5+
import { useRequest } from 'taro-hooks';
6+
7+
import { AtButton } from 'taro-ui';
8+
import { View } from '@tarojs/components';
9+
import DocPage from '@components/DocPage';
10+
11+
async function getCurrentTime(): Promise<number> {
12+
return new Promise((resolve) => {
13+
setTimeout(() => {
14+
resolve(new Date().getTime());
15+
}, 100);
16+
});
17+
}
18+
19+
const LoadingDelayRequest = () => {
20+
const getTimeAction = useRequest(getCurrentTime);
21+
22+
const withLoadingDelayAction = useRequest(getCurrentTime, {
23+
loadingDelay: 200,
24+
});
25+
26+
const trigger = () => {
27+
getTimeAction.run();
28+
withLoadingDelayAction.run();
29+
};
30+
31+
return (
32+
<DocPage title="useRequest loading Delay" panelTitle="loading Delay">
33+
<View>
34+
loadingDelay can set delay loading, which can effectively prevent
35+
loading from flickering.
36+
</View>
37+
<AtButton
38+
type="primary"
39+
onClick={trigger}
40+
customStyle={{ margin: '10px 0' }}
41+
>
42+
run
43+
</AtButton>
44+
<View style={{ marginBottom: '10px' }}>
45+
Current Time: {getTimeAction.loading ? 'loading' : getTimeAction.data}
46+
</View>
47+
<View>
48+
Current Time:{' '}
49+
{withLoadingDelayAction.loading
50+
? 'loading'
51+
: withLoadingDelayAction.data}
52+
</View>
53+
</DocPage>
54+
);
55+
};
56+
57+
export default LoadingDelayRequest;

‎packages/app/src/pages/useRequest/refreshDeps/index.config.ts

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

‎packages/app/src/pages/useRequest/refreshDeps/index.tsx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
* desc: 当 `options.refreshDeps` 变化时，useRequest 会使用之前的参数重新执行 service。
3+
*/
4+
import React, { useState } from 'react';
5+
import { useRequest } from 'taro-hooks';
6+
7+
import { AtButton, AtActionSheet, AtActionSheetItem } from 'taro-ui';
8+
import { View } from '@tarojs/components';
9+
import DocPage from '@components/DocPage';
10+
11+
const userSchool = (id: string) => {
12+
switch (id) {
13+
case '1':
14+
return 'Tsinghua University';
15+
case '2':
16+
return 'Beijing University';
17+
case '3':
18+
return 'Zhejiang University';
19+
default:
20+
return '';
21+
}
22+
};
23+
24+
async function getUserSchool(userId: string): Promise<string> {
25+
return new Promise((resolve) => {
26+
setTimeout(() => {
27+
resolve(userSchool(userId));
28+
}, 1000);
29+
});
30+
}
31+
32+
const RefreshDepsRequest = () => {
33+
const [userId, setUserId] = useState('1');
34+
const [isOpened, changeIsOpened] = useState<boolean>(false);
35+
const { data, loading } = useRequest(() => getUserSchool(userId), {
36+
refreshDeps: [userId],
37+
});
38+
39+
return (
40+
<DocPage title="useRequest refreshDeps" panelTitle="refreshDeps">
41+
<AtButton
42+
type="primary"
43+
onClick={() => changeIsOpened(true)}
44+
customStyle={{ margin: '10px 0' }}
45+
>
46+
点击更改userId: {userId}
47+
</AtButton>
48+
<View>School: {loading ? 'loading' : data}</View>
49+
<AtActionSheet isOpened={isOpened} onClose={() => changeIsOpened(false)}>
50+
{['1', '2', '3'].map((v) => (
51+
<AtActionSheetItem
52+
onClick={() => {
53+
setUserId(v);
54+
changeIsOpened(false);
55+
}}
56+
key={v}
57+
>
58+
user {v}
59+
</AtActionSheetItem>
60+
))}
61+
</AtActionSheet>
62+
</DocPage>
63+
);
64+
};
65+
66+
export default RefreshDepsRequest;

‎packages/hooks/src/useRequest/index.md

+24
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,26 @@ const { data, error, loading, run, params, cancel, refresh, mutate, fetches } =
107107

108108
<code src="@pages/useRequest/mutate"></code>
109109

110+
### Loading Delay
111+
112+
<code src="@pages/useRequest/loadingDelay"></code>
113+
114+
### refreshDeps
115+
116+
当某些`state`变化时，我们需要重新执行异步请求，一般我们会这样写代码：
117+
118+
```javascript
119+
const [userId, setUserId] = useState('1');
120+
const { data, run, loading } = useRequest(() => getUserSchool(userId));
121+
useEffect(() => {
122+
run();
123+
}, [userId]);
124+
```
125+
126+
`refreshDeps`是一个语法糖，让你更方便的实现上面的功能。当`refreshDeps`变化时，会使用之前的`params`重新执行`service`。
127+
128+
<code src="@pages/useRequest/refreshDeps"></code>
129+
110130
## 返回值说明
111131

112132
| 参数 | 说明 | 类型 |
@@ -184,6 +204,10 @@ const { loading, run } = useRequest(
184204
);
185205
```
186206

207+
<code src="@pages/useRequest/fetch"></code>
208+
209+
<code src="@pages/useRequest/axios"></code>
210+
187211
#### API
188212

189213
```typescript

0 commit comments

Comments
 (0)