From 2ed7f05fa69e5fcba5248691165230de719c3c3d Mon Sep 17 00:00:00 2001 From: innocces <18435105624@163.com> Date: Mon, 12 Jul 2021 22:12:33 +0800 Subject: [PATCH] docs(userequest): add custom request to docs --- packages/app/package.json | 2 + packages/app/src/app.config.ts | 6 +- .../pages/useRequest/axios/index.config.ts | 3 + .../app/src/pages/useRequest/axios/index.tsx | 41 ++++++++++++ .../pages/useRequest/fetch/index.config.ts | 3 + .../app/src/pages/useRequest/fetch/index.tsx | 28 ++++++++ packages/app/src/pages/useRequest/index.tsx | 20 ++++++ .../useRequest/loadingDelay/index.config.ts | 3 + .../pages/useRequest/loadingDelay/index.tsx | 57 ++++++++++++++++ .../useRequest/refreshDeps/index.config.ts | 3 + .../pages/useRequest/refreshDeps/index.tsx | 66 +++++++++++++++++++ packages/hooks/src/useRequest/index.md | 24 +++++++ 12 files changed, 255 insertions(+), 1 deletion(-) create mode 100644 packages/app/src/pages/useRequest/axios/index.config.ts create mode 100644 packages/app/src/pages/useRequest/axios/index.tsx create mode 100644 packages/app/src/pages/useRequest/fetch/index.config.ts create mode 100644 packages/app/src/pages/useRequest/fetch/index.tsx create mode 100644 packages/app/src/pages/useRequest/loadingDelay/index.config.ts create mode 100644 packages/app/src/pages/useRequest/loadingDelay/index.tsx create mode 100644 packages/app/src/pages/useRequest/refreshDeps/index.config.ts create mode 100644 packages/app/src/pages/useRequest/refreshDeps/index.tsx diff --git a/packages/app/package.json b/packages/app/package.json index 8df0c5143..28127ff06 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -41,6 +41,8 @@ "@tarojs/react": "3.2.15", "@tarojs/runtime": "3.2.15", "@tarojs/taro": "3.2.15", + "axios": "^0.21.1", + "axios-miniprogram-adapter": "^0.3.2", "lodash": "4.17.15", "mockjs": "^1.1.0", "react": "^17.0.2", diff --git a/packages/app/src/app.config.ts b/packages/app/src/app.config.ts index 8eca411be..efdcc774c 100644 --- a/packages/app/src/app.config.ts +++ b/packages/app/src/app.config.ts @@ -26,7 +26,11 @@ export default { 'pages/useRequest/cacheKey/index', 'pages/useRequest/preload/index', 'pages/useRequest/refreshOnWindowFocus/index', - // 'pages/useRequest/mutate/index', + 'pages/useRequest/mutate/index', + 'pages/useRequest/loadingDelay/index', + 'pages/useRequest/refreshDeps/index', + 'pages/useRequest/fetch/index', + 'pages/useRequest/axios/index', 'pages/useNetworkType/index', 'pages/useOnline/index', ], diff --git a/packages/app/src/pages/useRequest/axios/index.config.ts b/packages/app/src/pages/useRequest/axios/index.config.ts new file mode 100644 index 000000000..572932614 --- /dev/null +++ b/packages/app/src/pages/useRequest/axios/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'useRequest requstMethod', +}; diff --git a/packages/app/src/pages/useRequest/axios/index.tsx b/packages/app/src/pages/useRequest/axios/index.tsx new file mode 100644 index 000000000..0d86267d7 --- /dev/null +++ b/packages/app/src/pages/useRequest/axios/index.tsx @@ -0,0 +1,41 @@ +/** + * desc: 通过设置 `requstMethod`, 可以使用自己的请求库。 + */ +import React from 'react'; +import { useRequest } from 'taro-hooks'; +import axios from 'axios/dist/axios.min.js'; +import adapter from 'axios-miniprogram-adapter'; + +import { View } from '@tarojs/components'; +import DocPage from '@components/DocPage'; + +const requestMethod = axios.create( + process.env.TARO_ENV === 'h5' + ? {} + : { + adapter, + }, +); + +const MethodRequest = () => { + const { data, error, loading } = useRequest( + 'https://run.mocky.io/v3/cd8e3926-740c-4a2c-ab80-45c0c4fe8dd2', + { + requestMethod: (param: any) => requestMethod(param), + }, + ); + + return ( + + + {error + ? 'failed to load' + : loading + ? 'loading...' + : 'responese:' + JSON.stringify(data?.data)} + + + ); +}; + +export default MethodRequest; diff --git a/packages/app/src/pages/useRequest/fetch/index.config.ts b/packages/app/src/pages/useRequest/fetch/index.config.ts new file mode 100644 index 000000000..70499e092 --- /dev/null +++ b/packages/app/src/pages/useRequest/fetch/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'useRequest 默认请求库', +}; diff --git a/packages/app/src/pages/useRequest/fetch/index.tsx b/packages/app/src/pages/useRequest/fetch/index.tsx new file mode 100644 index 000000000..6459f6260 --- /dev/null +++ b/packages/app/src/pages/useRequest/fetch/index.tsx @@ -0,0 +1,28 @@ +/** + * desc: 如果 useRequest 第一个参数是 `string`、`object` 或 `()=> string|object`，则默认使用 Taro.request 发送网络请求 + */ +import React from 'react'; +import { useRequest } from 'taro-hooks'; + +import { View } from '@tarojs/components'; +import DocPage from '@components/DocPage'; + +const FetchRequest = () => { + const { data, error, loading } = useRequest( + 'https://run.mocky.io/v3/cd8e3926-740c-4a2c-ab80-45c0c4fe8dd2', + ); + + return ( + + + {error + ? 'failed to load' + : loading + ? 'loading...' + : 'responese:' + JSON.stringify(data?.data)} + + + ); +}; + +export default FetchRequest; diff --git a/packages/app/src/pages/useRequest/index.tsx b/packages/app/src/pages/useRequest/index.tsx index ba4bb80f1..b1bcc104c 100644 --- a/packages/app/src/pages/useRequest/index.tsx +++ b/packages/app/src/pages/useRequest/index.tsx @@ -68,6 +68,26 @@ const list: IListItem[] = [ note: '你可以通过 mutate ，直接修改 data 。 mutate 函数参数可以为 newData 或 (oldData)=> newData 。', route: 'mutate', }, + { + title: 'Loading Delay', + note: '通过设置 options.loadingDelay ，可以延迟 loading 变成 true 的时间，有效防止闪烁。', + route: 'loadingDelay', + }, + { + title: 'refreshDeps', + note: '当 options.refreshDeps 变化时，useRequest 会使用之前的参数重新执行 service。', + route: 'refreshDeps', + }, + { + title: '默认请求库', + note: '如果 useRequest 第一个参数是 string、object 或 ()=> string|object，则默认使用 Taro.request 发送网络请求', + route: 'fetch', + }, + { + title: '集成请求库', + note: '通过设置 requstMethod, 可以使用自己的请求库。', + route: 'axios', + }, ]; export default () => { diff --git a/packages/app/src/pages/useRequest/loadingDelay/index.config.ts b/packages/app/src/pages/useRequest/loadingDelay/index.config.ts new file mode 100644 index 000000000..946e2d15b --- /dev/null +++ b/packages/app/src/pages/useRequest/loadingDelay/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'useRequest Loading Delay', +}; diff --git a/packages/app/src/pages/useRequest/loadingDelay/index.tsx b/packages/app/src/pages/useRequest/loadingDelay/index.tsx new file mode 100644 index 000000000..3bce68e82 --- /dev/null +++ b/packages/app/src/pages/useRequest/loadingDelay/index.tsx @@ -0,0 +1,57 @@ +/** + * desc: 通过设置 `options.loadingDelay` ，可以延迟 `loading` 变成 `true` 的时间，有效防止闪烁。 + */ +import React from 'react'; +import { useRequest } from 'taro-hooks'; + +import { AtButton } from 'taro-ui'; +import { View } from '@tarojs/components'; +import DocPage from '@components/DocPage'; + +async function getCurrentTime(): Promise { + return new Promise((resolve) => { + setTimeout(() => { + resolve(new Date().getTime()); + }, 100); + }); +} + +const LoadingDelayRequest = () => { + const getTimeAction = useRequest(getCurrentTime); + + const withLoadingDelayAction = useRequest(getCurrentTime, { + loadingDelay: 200, + }); + + const trigger = () => { + getTimeAction.run(); + withLoadingDelayAction.run(); + }; + + return ( + + + loadingDelay can set delay loading, which can effectively prevent + loading from flickering. + + + run + + + Current Time: {getTimeAction.loading ? 'loading' : getTimeAction.data} + + + Current Time:{' '} + {withLoadingDelayAction.loading + ? 'loading' + : withLoadingDelayAction.data} + + + ); +}; + +export default LoadingDelayRequest; diff --git a/packages/app/src/pages/useRequest/refreshDeps/index.config.ts b/packages/app/src/pages/useRequest/refreshDeps/index.config.ts new file mode 100644 index 000000000..68ada9cb7 --- /dev/null +++ b/packages/app/src/pages/useRequest/refreshDeps/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: 'useRequest refreshDeps', +}; diff --git a/packages/app/src/pages/useRequest/refreshDeps/index.tsx b/packages/app/src/pages/useRequest/refreshDeps/index.tsx new file mode 100644 index 000000000..b5c717543 --- /dev/null +++ b/packages/app/src/pages/useRequest/refreshDeps/index.tsx @@ -0,0 +1,66 @@ +/** + * desc: 当 `options.refreshDeps` 变化时，useRequest 会使用之前的参数重新执行 service。 + */ +import React, { useState } from 'react'; +import { useRequest } from 'taro-hooks'; + +import { AtButton, AtActionSheet, AtActionSheetItem } from 'taro-ui'; +import { View } from '@tarojs/components'; +import DocPage from '@components/DocPage'; + +const userSchool = (id: string) => { + switch (id) { + case '1': + return 'Tsinghua University'; + case '2': + return 'Beijing University'; + case '3': + return 'Zhejiang University'; + default: + return ''; + } +}; + +async function getUserSchool(userId: string): Promise { + return new Promise((resolve) => { + setTimeout(() => { + resolve(userSchool(userId)); + }, 1000); + }); +} + +const RefreshDepsRequest = () => { + const [userId, setUserId] = useState('1'); + const [isOpened, changeIsOpened] = useState(false); + const { data, loading } = useRequest(() => getUserSchool(userId), { + refreshDeps: [userId], + }); + + return ( + + changeIsOpened(true)} + customStyle={{ margin: '10px 0' }} + > + 点击更改userId: {userId} + + School: {loading ? 'loading' : data} + changeIsOpened(false)}> + {['1', '2', '3'].map((v) => ( + { + setUserId(v); + changeIsOpened(false); + }} + key={v} + > + user {v} + + ))} + + + ); +}; + +export default RefreshDepsRequest; diff --git a/packages/hooks/src/useRequest/index.md b/packages/hooks/src/useRequest/index.md index c575b54f2..4a66dd087 100644 --- a/packages/hooks/src/useRequest/index.md +++ b/packages/hooks/src/useRequest/index.md @@ -107,6 +107,26 @@ const { data, error, loading, run, params, cancel, refresh, mutate, fetches } = +### Loading Delay + + + +### refreshDeps + +当某些`state`变化时，我们需要重新执行异步请求，一般我们会这样写代码： + +```javascript +const [userId, setUserId] = useState('1'); +const { data, run, loading } = useRequest(() => getUserSchool(userId)); +useEffect(() => { + run(); +}, [userId]); +``` + +`refreshDeps`是一个语法糖，让你更方便的实现上面的功能。当`refreshDeps`变化时，会使用之前的`params`重新执行`service`。 + + + ## 返回值说明 | 参数 | 说明 | 类型 | @@ -184,6 +204,10 @@ const { loading, run } = useRequest( ); ``` + + + + #### API ```typescript