fix: request plugin type and usage (#5992)

* feat: add d.ts type * fix: request type * fix: useRequest usage * chore: changeset * feat: support useRequest param is string
alibaba · Mar 1, 2023 · dae91e2 · dae91e2
1 parent c6b70bc
commit dae91e2
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 17 deletions.
diff --git a/.changeset/nasty-lemons-agree.md 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
@@ -0,0 +1 @@
+export * from './esm/hooks';
diff --git a/packages/plugin-request/request.d.ts 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
@@ -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<R, P extends any[]> extends Result<R, P> {
   request: (...args: P) => Promise<R>;
 }
 
-function useRequest<TData, TParams extends any[]>(
-  service: AxiosRequestConfig | Service<TData, TParams>,
+export function useRequest<TData, TParams extends any[]>(
+  service: string | AxiosRequestConfig | Service<TData, TParams>,
   options?: Options<TData, TParams>,
   plugins?: Plugin<TData, TParams>[]) {
   let s: Service<TData, TParams>;
   if (isFunction(service)) {
     s = service as Service<TData, TParams>;
+  } 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<TData, TParams extends any[]>(
   } as RequestResult<TData, TParams>;
 }
 
-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
@@ -13,13 +13,13 @@ const plugin: Plugin<PluginRequestOptions | void> = () => ({
     // 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
@@ -96,7 +96,7 @@ const request = async function <T = any, D = any>(options: RequestConfig<D>): 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 <T = any, D = any>(options: RequestConfig<D>): 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
@@ -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)