docs(userequest): add custom request to docs

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",

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',
   ],

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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useRequest requstMethod',
+};

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 (
+    <DocPage title="useRequest requstMethod" panelTitle="requstMethod">
+      <View>
+        {error
+          ? 'failed to load'
+          : loading
+          ? 'loading...'
+          : 'responese:' + JSON.stringify(data?.data)}
+      </View>
+    </DocPage>
+  );
+};
+
+export default MethodRequest;

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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useRequest 默认请求库',
+};

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 (
+    <DocPage title="useRequest 默认请求库" panelTitle="默认请求库">
+      <View>
+        {error
+          ? 'failed to load'
+          : loading
+          ? 'loading...'
+          : 'responese:' + JSON.stringify(data?.data)}
+      </View>
+    </DocPage>
+  );
+};
+
+export default FetchRequest;

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 () => {

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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useRequest Loading Delay',
+};

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<number> {
+  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 (
+    <DocPage title="useRequest loading Delay" panelTitle="loading Delay">
+      <View>
+        loadingDelay can set delay loading, which can effectively prevent
+        loading from flickering.
+      </View>
+      <AtButton
+        type="primary"
+        onClick={trigger}
+        customStyle={{ margin: '10px 0' }}
+      >
+        run
+      </AtButton>
+      <View style={{ marginBottom: '10px' }}>
+        Current Time: {getTimeAction.loading ? 'loading' : getTimeAction.data}
+      </View>
+      <View>
+        Current Time:{' '}
+        {withLoadingDelayAction.loading
+          ? 'loading'
+          : withLoadingDelayAction.data}
+      </View>
+    </DocPage>
+  );
+};
+
+export default LoadingDelayRequest;

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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useRequest refreshDeps',
+};

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<string> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(userSchool(userId));
+    }, 1000);
+  });
+}
+
+const RefreshDepsRequest = () => {
+  const [userId, setUserId] = useState('1');
+  const [isOpened, changeIsOpened] = useState<boolean>(false);
+  const { data, loading } = useRequest(() => getUserSchool(userId), {
+    refreshDeps: [userId],
+  });
+
+  return (
+    <DocPage title="useRequest refreshDeps" panelTitle="refreshDeps">
+      <AtButton
+        type="primary"
+        onClick={() => changeIsOpened(true)}
+        customStyle={{ margin: '10px 0' }}
+      >
+        点击更改userId: {userId}
+      </AtButton>
+      <View>School: {loading ? 'loading' : data}</View>
+      <AtActionSheet isOpened={isOpened} onClose={() => changeIsOpened(false)}>
+        {['1', '2', '3'].map((v) => (
+          <AtActionSheetItem
+            onClick={() => {
+              setUserId(v);
+              changeIsOpened(false);
+            }}
+            key={v}
+          >
+            user {v}
+          </AtActionSheetItem>
+        ))}
+      </AtActionSheet>
+    </DocPage>
+  );
+};
+
+export default RefreshDepsRequest;

packages/hooks/src/useRequest/index.md

@@ -107,6 +107,26 @@ const { data, error, loading, run, params, cancel, refresh, mutate, fetches } =
 
 <code src="@pages/useRequest/mutate"></code>
 
+### Loading Delay
+
+<code src="@pages/useRequest/loadingDelay"></code>
+
+### refreshDeps
+
+当某些`state`变化时，我们需要重新执行异步请求，一般我们会这样写代码：
+
+```javascript
+const [userId, setUserId] = useState('1');
+const { data, run, loading } = useRequest(() => getUserSchool(userId));
+useEffect(() => {
+  run();
+}, [userId]);
+```
+
+`refreshDeps`是一个语法糖，让你更方便的实现上面的功能。当`refreshDeps`变化时，会使用之前的`params`重新执行`service`。
+
+<code src="@pages/useRequest/refreshDeps"></code>
+
 ## 返回值说明
 
 | 参数    | 说明                                                                                                                                                                            | 类型                                                                    |
@@ -184,6 +204,10 @@ const { loading, run } = useRequest(
 );
 ```
 
+<code src="@pages/useRequest/fetch"></code>
+
+<code src="@pages/useRequest/axios"></code>
+
 #### API
 
 ```typescript