From cd1fba6a80f37ced2b0d9561d069949032285153 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=BB=BA=E5=B3=B0?= <645381995@qq.com> Date: Mon, 2 Dec 2024 09:48:08 +0800 Subject: [PATCH 1/3] feat: support params --- .../doc/basic/demo/defaultParams.tsx | 44 +++++++++++++++++++ .../src/useRequest/doc/basic/demo/params.tsx | 14 +++--- .../src/plugins/useAutoRunPlugin.ts | 21 ++++++--- packages/hooks/src/useRequest/src/types.ts | 2 + .../src/useRequest/src/useRequestImplement.ts | 37 ++++++++++------ 5 files changed, 91 insertions(+), 27 deletions(-) create mode 100644 packages/hooks/src/useRequest/doc/basic/demo/defaultParams.tsx diff --git a/packages/hooks/src/useRequest/doc/basic/demo/defaultParams.tsx b/packages/hooks/src/useRequest/doc/basic/demo/defaultParams.tsx new file mode 100644 index 0000000000..da3763468e --- /dev/null +++ b/packages/hooks/src/useRequest/doc/basic/demo/defaultParams.tsx @@ -0,0 +1,44 @@ +import { useRequest } from 'ahooks'; +import Mock from 'mockjs'; +import React, { useState } from 'react'; + +function getUsername(id: string): Promise { + return new Promise((resolve) => { + setTimeout(() => { + resolve(Mock.mock('@name')); + }, 1000); + }); +} + +export default () => { + const [state, setState] = useState(''); + + // get username + const { + data: username, + run, + params, + } = useRequest(getUsername, { + defaultParams: ['1'], + }); + + const onChange = () => { + run(state); + }; + + return ( +
+ setState(e.target.value)} + value={state} + placeholder="Please enter userId" + style={{ width: 240, marginRight: 16 }} + /> + +

UserId: {params[0]}

+

Username: {username}

+
+ ); +}; diff --git a/packages/hooks/src/useRequest/doc/basic/demo/params.tsx b/packages/hooks/src/useRequest/doc/basic/demo/params.tsx index da3763468e..a920230644 100644 --- a/packages/hooks/src/useRequest/doc/basic/demo/params.tsx +++ b/packages/hooks/src/useRequest/doc/basic/demo/params.tsx @@ -1,26 +1,24 @@ -import { useRequest } from 'ahooks'; -import Mock from 'mockjs'; -import React, { useState } from 'react'; +import { useRequest } from "ahooks"; +import Mock from "mockjs"; +import React, { useState } from "react"; function getUsername(id: string): Promise { return new Promise((resolve) => { setTimeout(() => { - resolve(Mock.mock('@name')); + resolve(id); }, 1000); }); } export default () => { - const [state, setState] = useState(''); + const [state, setState] = useState(""); // get username const { data: username, run, params, - } = useRequest(getUsername, { - defaultParams: ['1'], - }); + } = useRequest(getUsername, { params: [state] }); const onChange = () => { run(state); diff --git a/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts b/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts index 7f852d7ca8..ba2972bdba 100644 --- a/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts +++ b/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts @@ -1,11 +1,18 @@ -import { useRef } from 'react'; -import useUpdateEffect from '../../../useUpdateEffect'; -import type { Plugin } from '../types'; +import { useRef } from "react"; +import useUpdateEffect from "../../../useUpdateEffect"; +import type { Plugin } from "../types"; // support refreshDeps & ready const useAutoRunPlugin: Plugin = ( fetchInstance, - { manual, ready = true, defaultParams = [], refreshDeps = [], refreshDepsAction }, + { + manual, + ready = true, + defaultParams = [], + params = [], + refreshDeps = [], + refreshDepsAction, + } ) => { const hasAutoRun = useRef(false); hasAutoRun.current = false; @@ -26,7 +33,11 @@ const useAutoRunPlugin: Plugin = ( if (refreshDepsAction) { refreshDepsAction(); } else { - fetchInstance.refresh(); + if (params.length > 0) { + fetchInstance.run(...params); + } else { + fetchInstance.refresh(); + } } } }, [...refreshDeps]); diff --git a/packages/hooks/src/useRequest/src/types.ts b/packages/hooks/src/useRequest/src/types.ts index 442a2dff73..23987e4efb 100644 --- a/packages/hooks/src/useRequest/src/types.ts +++ b/packages/hooks/src/useRequest/src/types.ts @@ -48,6 +48,8 @@ export interface Options { onFinally?: (params: TParams, data?: TData, e?: Error) => void; defaultParams?: TParams; + + params?: TParams; // refreshDeps refreshDeps?: DependencyList; diff --git a/packages/hooks/src/useRequest/src/useRequestImplement.ts b/packages/hooks/src/useRequest/src/useRequestImplement.ts index d65cfba6cb..a9960754b6 100644 --- a/packages/hooks/src/useRequest/src/useRequestImplement.ts +++ b/packages/hooks/src/useRequest/src/useRequestImplement.ts @@ -1,24 +1,29 @@ -import useCreation from '../../useCreation'; -import useLatest from '../../useLatest'; -import useMemoizedFn from '../../useMemoizedFn'; -import useMount from '../../useMount'; -import useUnmount from '../../useUnmount'; -import useUpdate from '../../useUpdate'; -import isDev from '../../utils/isDev'; +import useCreation from "../../useCreation"; +import useLatest from "../../useLatest"; +import useMemoizedFn from "../../useMemoizedFn"; +import useMount from "../../useMount"; +import useUnmount from "../../useUnmount"; +import useUpdate from "../../useUpdate"; +import isDev from "../../utils/isDev"; -import Fetch from './Fetch'; -import type { Options, Plugin, Result, Service } from './types'; +import Fetch from "./Fetch"; +import type { Options, Plugin, Result, Service } from "./types"; function useRequestImplement( service: Service, options: Options = {}, - plugins: Plugin[] = [], + plugins: Plugin[] = [] ) { const { manual = false, ready = true, ...rest } = options; if (isDev) { if (options.defaultParams && !Array.isArray(options.defaultParams)) { - console.warn(`expected defaultParams is array, got ${typeof options.defaultParams}`); + console.warn( + `expected defaultParams is array, got ${typeof options.defaultParams}` + ); + } + if (options.params && !Array.isArray(options.params)) { + console.warn(`expected params is array, got ${typeof options.params}`); } } @@ -33,18 +38,22 @@ function useRequestImplement( const update = useUpdate(); const fetchInstance = useCreation(() => { - const initState = plugins.map((p) => p?.onInit?.(fetchOptions)).filter(Boolean); + const initState = plugins + .map((p) => p?.onInit?.(fetchOptions)) + .filter(Boolean); return new Fetch( serviceRef, fetchOptions, update, - Object.assign({}, ...initState), + Object.assign({}, ...initState) ); }, []); fetchInstance.options = fetchOptions; // run all plugins hooks - fetchInstance.pluginImpls = plugins.map((p) => p(fetchInstance, fetchOptions)); + fetchInstance.pluginImpls = plugins.map((p) => + p(fetchInstance, fetchOptions) + ); useMount(() => { if (!manual && ready) { From 6361a9c7e6ff7449fb0ec03e373c8b60b9e0e5af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=BB=BA=E5=B3=B0?= <645381995@qq.com> Date: Mon, 2 Dec 2024 09:59:54 +0800 Subject: [PATCH 2/3] feat: support params --- .../hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts b/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts index ba2972bdba..c20997763d 100644 --- a/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts +++ b/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts @@ -20,7 +20,11 @@ const useAutoRunPlugin: Plugin = ( useUpdateEffect(() => { if (!manual && ready) { hasAutoRun.current = true; - fetchInstance.run(...defaultParams); + if (params.length > 0) { + fetchInstance.run(...params); + } else { + fetchInstance.run(...defaultParams); + } } }, [ready]); From 7e506c5729b341c765ad718f7deadf81d98ec09d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=BB=BA=E5=B3=B0?= <645381995@qq.com> Date: Mon, 2 Dec 2024 10:00:14 +0800 Subject: [PATCH 3/3] feat: support params --- .../useRequest/src/plugins/useAutoRunPlugin.ts | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts b/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts index c20997763d..dbc9bea491 100644 --- a/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts +++ b/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts @@ -1,18 +1,11 @@ -import { useRef } from "react"; -import useUpdateEffect from "../../../useUpdateEffect"; -import type { Plugin } from "../types"; +import { useRef } from 'react'; +import useUpdateEffect from '../../../useUpdateEffect'; +import type { Plugin } from '../types'; // support refreshDeps & ready const useAutoRunPlugin: Plugin = ( fetchInstance, - { - manual, - ready = true, - defaultParams = [], - params = [], - refreshDeps = [], - refreshDepsAction, - } + { manual, ready = true, defaultParams = [], params = [], refreshDeps = [], refreshDepsAction }, ) => { const hasAutoRun = useRef(false); hasAutoRun.current = false;