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..dbc9bea491 100644 --- a/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts +++ b/packages/hooks/src/useRequest/src/plugins/useAutoRunPlugin.ts @@ -5,7 +5,7 @@ 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; @@ -13,7 +13,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]); @@ -26,7 +30,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) {