diff --git a/.changeset/nasty-lemons-agree.md b/.changeset/nasty-lemons-agree.md new file mode 100644 index 0000000000..a9eeaf77df --- /dev/null +++ b/.changeset/nasty-lemons-agree.md @@ -0,0 +1,6 @@ +--- +'@ice/plugin-request': patch +--- + +fix: request and useRequest type +fix: useRequest usage diff --git a/packages/plugin-request/hooks.d.ts b/packages/plugin-request/hooks.d.ts new file mode 100644 index 0000000000..82f45d2ab4 --- /dev/null +++ b/packages/plugin-request/hooks.d.ts @@ -0,0 +1 @@ +export * from './esm/hooks'; \ No newline at end of file diff --git a/packages/plugin-request/request.d.ts b/packages/plugin-request/request.d.ts new file mode 100644 index 0000000000..68fdaad5a5 --- /dev/null +++ b/packages/plugin-request/request.d.ts @@ -0,0 +1 @@ +export * from './esm/request'; diff --git a/packages/plugin-request/src/hooks.ts b/packages/plugin-request/src/hooks.ts index 3bc2f77aa7..c6e2d2a43b 100644 --- a/packages/plugin-request/src/hooks.ts +++ b/packages/plugin-request/src/hooks.ts @@ -1,28 +1,31 @@ import { useRequest as useAhooksRequest } from 'ahooks'; import type { Options, Result, Service, Plugin } from 'ahooks/lib/useRequest/src/types'; import type { AxiosRequestConfig } from 'axios'; -import request from './request.js'; +import { request } from './request.js'; interface RequestResult extends Result { request: (...args: P) => Promise; } -function useRequest( - service: AxiosRequestConfig | Service, +export function useRequest( + service: string | AxiosRequestConfig | Service, options?: Options, plugins?: Plugin[]) { let s: Service; if (isFunction(service)) { s = service as Service; + } else if (isString(service)) { + s = async (...extraOptions: TParams) => { + return request({ url: service, ...extraOptions }); + }; } else { const options = service as AxiosRequestConfig; s = async (...extraOptions: TParams) => { - const response = await request({ ...options, ...extraOptions }); - return response.data as TData; + return request({ ...options, ...extraOptions }); }; } const req = useAhooksRequest(s, { - // Note: + // Note: // ahooks/useRequest manual default to true. // ICE3/useRequest Default to manual request. manual: true, @@ -35,7 +38,9 @@ function useRequest( } as RequestResult; } -export default useRequest; +function isString(str: any): str is string { + return typeof str === 'string'; +} function isFunction(fn: any): fn is Function { return typeof fn === 'function'; diff --git a/packages/plugin-request/src/index.ts b/packages/plugin-request/src/index.ts index bf7c80ce41..bc4be6e1df 100644 --- a/packages/plugin-request/src/index.ts +++ b/packages/plugin-request/src/index.ts @@ -13,13 +13,13 @@ const plugin: Plugin = () => ({ // Add useRequest export for 'ice'. // import { useRequest } from 'ice'; generator.addExport({ - specifier: 'useRequest', + specifier: ['useRequest'], source: '@ice/plugin-request/hooks', type: false, }); // import { request } from 'ice'; generator.addExport({ - specifier: 'request', + specifier: ['request'], source: '@ice/plugin-request/request', type: false, }); diff --git a/packages/plugin-request/src/request.ts b/packages/plugin-request/src/request.ts index 39dba35347..2395da679e 100644 --- a/packages/plugin-request/src/request.ts +++ b/packages/plugin-request/src/request.ts @@ -96,7 +96,7 @@ const request = async function (options: RequestConfig): Pr console.error(error); throw error; } -}; +} as Request; // Provide aliases for supported request methods ['delete', 'get', 'head', 'options'].forEach((method) => { @@ -121,4 +121,4 @@ const request = async function (options: RequestConfig): Pr request.CancelToken = axios.CancelToken; request.isCancel = axios.isCancel; -export default request as Request; +export { request }; diff --git a/website/docs/guide/advanced/request.md b/website/docs/guide/advanced/request.md index 88aa63eee0..70e5a95f26 100644 --- a/website/docs/guide/advanced/request.md +++ b/website/docs/guide/advanced/request.md @@ -341,21 +341,27 @@ const { ```ts import { useRequest } from 'ice'; -// 用法 1:传入字符串 -const { data, error, loading } = useRequest('/api/repo'); +// 用法 1:传入请求地址 +const { data, error, loading, request } = useRequest('/api/repo'); -// 用法 2:传入配置对象 -const { data, error, loading } = useRequest({ +request(); + +// 用法 2:传入 Axios 配置对象 +const { data, error, loading, request } = useRequest({ url: '/api/repo', method: 'get', }); +request(); + // 用法 3:传入 service 函数 -const { data, error, loading, request } = useRequest((id) => ({ +const { data, error, loading, request } = useRequest((id) => Promise.resolve({ url: '/api/repo', method: 'get', data: { id }, -}); +})); + +request(); ``` 更多使用方式详见 [ahooks/useRequest](https://ahooks.js.org/zh-CN/hooks/use-request/index)