docs(request demo): add concurrent ready demo of useRequest

packages/app/src/app.config.ts

@@ -19,6 +19,8 @@ export default {
     'pages/useRequest/defaultRequest/index',
     'pages/useRequest/manual/index',
     'pages/useRequest/polling/index',
+    'pages/useRequest/concurrent/index',
+    'pages/useRequest/ready/index',
     'pages/useNetworkType/index',
     'pages/useOnline/index',
   ],

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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useRequest 并行请求',
+};

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

@@ -0,0 +1,60 @@
+/**
+ * desc: 通过 `options.fetchKey` ，可以将请求进行分类，每一类的请求都有独立的状态，你可以在 `fetches` 中找到所有的请求。
+ */
+import React from 'react';
+import { useRequest } from 'taro-hooks';
+import Taro from '@tarojs/taro';
+
+import { AtMessage, AtButton } from 'taro-ui';
+import { View } from '@tarojs/components';
+import DocPage from '@components/DocPage';
+
+type Result = { success: boolean };
+
+export function deleteUser(userId: string): Promise<Result> {
+  console.log(userId);
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({ success: true });
+    }, 1000);
+  });
+}
+
+const ConcurrentRequest = () => {
+  const { run, fetches } = useRequest(deleteUser, {
+    manual: true,
+    fetchKey: (id: string) => id,
+    onSuccess: (result: Result, params: string[]) => {
+      if (result.success) {
+        Taro.atMessage({ message: `Disabled user ${params[0]}` });
+      }
+    },
+  });
+
+  const users = [
+    { id: '1', username: 'A' },
+    { id: '2', username: 'B' },
+    { id: '3', username: 'C' },
+  ];
+
+  return (
+    <DocPage title="useRequest 请求" panelTitle="并行请求">
+      <AtMessage />
+      <View>You can click all buttons, each request has its own status.</View>
+      {users.map(({ id, username }) => (
+        <AtButton
+          key={id}
+          type="primary"
+          loading={fetches[id]?.loading}
+          onClick={() => run(id)}
+          disabled={fetches[id]?.loading}
+          customStyle={{ marginTop: '10px' }}
+        >
+          {fetches[id]?.loading ? 'loading' : `delete ${username}`}
+        </AtButton>
+      ))}
+    </DocPage>
+  );
+};
+
+export default ConcurrentRequest;

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

@@ -28,6 +28,16 @@ const list: IListItem[] = [
     note: '通过设置 options.pollingInterval，进入轮询模式，定时触发函数执行。',
     route: 'polling',
   },
+  {
+    title: '并行请求',
+    note: '通过 options.fetchKey ，可以将请求进行分类，每一类的请求都有独立的状态，你可以在 fetches 中找到所有的请求。',
+    route: 'concurrent',
+  },
+  {
+    title: '依赖请求',
+    note: '只有当 options.ready 变为 true 时, 才会发起请求，基于该特性可以实现串行请求，依赖请求等。',
+    route: 'ready',
+  },
 ];
 
 export default () => {

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

@@ -19,7 +19,7 @@ function changeUsername(username: string): Promise<Result> {
   });
 }
 
-const DefaultRequest = () => {
+const ManualRequest = () => {
   const [state, setState] = useState('');
 
   const { loading, run } = useRequest(changeUsername, {
@@ -49,4 +49,4 @@ const DefaultRequest = () => {
   );
 };
 
-export default DefaultRequest;
+export default ManualRequest;

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

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'useRequest 依赖请求',
+};

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

@@ -0,0 +1,47 @@
+/**
+ * desc: 只有当 `options.ready` 变为 true 时, 才会发起请求，基于该特性可以实现串行请求，依赖请求等。
+ */
+import React from 'react';
+import { useRequest } from 'taro-hooks';
+import Mock from 'mockjs';
+
+import { View } from '@tarojs/components';
+import DocPage from '@components/DocPage';
+
+function getUserId(): Promise<number> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(1011);
+    }, 1000);
+  });
+}
+
+function getUsername(id: number): Promise<string> {
+  console.log('user id:', id);
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(Mock.mock('@name()'));
+    }, 1000);
+  });
+}
+
+const ReadyRequest = () => {
+  const userIdRequest = useRequest(getUserId);
+
+  const usernameRequest = useRequest(() => getUsername(userIdRequest.data), {
+    ready: !!userIdRequest.data,
+  });
+
+  return (
+    <DocPage title="useRequest 请求" panelTitle="依赖请求">
+      <View>
+        UserId: {userIdRequest.loading ? 'loading' : userIdRequest.data}
+      </View>
+      <View>
+        Username: {usernameRequest.loading ? 'loading' : usernameRequest.data}
+      </View>
+    </DocPage>
+  );
+};
+
+export default ReadyRequest;

packages/hooks/src/useRequest/index.md

@@ -75,6 +75,14 @@ const { data, error, loading, run, params, cancel, refresh, mutate, fetches } =
 
 <code src="@pages/useRequest/polling"></code>
 
+### 并行请求
+
+<code src="@pages/useRequest/concurrent"></code>
+
+### 依赖请求
+
+<code src="@pages/useRequest/ready"></code>
+
 ## 返回值说明
 
 | 参数    | 说明                                                                                                                                                                            | 类型                                                                    |