feat: pre-set serialization methods for request parameters (#5814)

添加快捷设置请求参数序列化方法的配置

packages/effects/request/package.json

@@ -22,9 +22,11 @@
   "dependencies": {
     "@vben/locales": "workspace:*",
     "@vben/utils": "workspace:*",
-    "axios": "catalog:"
+    "axios": "catalog:",
+    "qs": "catalog:"
   },
   "devDependencies": {
+    "@types/qs": "catalog:",
     "axios-mock-adapter": "catalog:"
   }
 }

packages/effects/request/src/request-client/request-client.ts

@@ -2,14 +2,39 @@ import type { AxiosInstance, AxiosResponse } from 'axios';
 
 import type { RequestClientConfig, RequestClientOptions } from './types';
 
-import { bindMethods, merge } from '@vben/utils';
+import { bindMethods, isString, merge } from '@vben/utils';
 
 import axios from 'axios';
+import qs from 'qs';
 
 import { FileDownloader } from './modules/downloader';
 import { InterceptorManager } from './modules/interceptor';
 import { FileUploader } from './modules/uploader';
 
+function getParamsSerializer(
+  paramsSerializer: RequestClientOptions['paramsSerializer'],
+) {
+  if (isString(paramsSerializer)) {
+    switch (paramsSerializer) {
+      case 'brackets': {
+        return (params: any) =>
+          qs.stringify(params, { arrayFormat: 'brackets' });
+      }
+      case 'comma': {
+        return (params: any) => qs.stringify(params, { arrayFormat: 'comma' });
+      }
+      case 'indices': {
+        return (params: any) =>
+          qs.stringify(params, { arrayFormat: 'indices' });
+      }
+      case 'repeat': {
+        return (params: any) => qs.stringify(params, { arrayFormat: 'repeat' });
+      }
+    }
+  }
+  return paramsSerializer;
+}
+
 class RequestClient {
   public addRequestInterceptor: InterceptorManager['addRequestInterceptor'];
 
@@ -39,6 +64,9 @@ class RequestClient {
     };
     const { ...axiosConfig } = options;
     const requestConfig = merge(axiosConfig, defaultConfig);
+    requestConfig.paramsSerializer = getParamsSerializer(
+      requestConfig.paramsSerializer,
+    );
     this.instance = axios.create(requestConfig);
 
     bindMethods(this);
@@ -108,6 +136,9 @@ class RequestClient {
       const response: AxiosResponse<T> = await this.instance({
         url,
         ...config,
+        ...(config.paramsSerializer
+          ? { paramsSerializer: getParamsSerializer(config.paramsSerializer) }
+          : {}),
       });
       return response as T;
     } catch (error: any) {

packages/effects/request/src/request-client/types.ts

@@ -5,15 +5,29 @@ import type {
   InternalAxiosRequestConfig,
 } from 'axios';
 
-type ExtendOptions = {
-  /** 响应数据的返回方式。
-   * raw: 原始的AxiosResponse，包括headers、status等，不做是否成功请求的检查。
-   * body: 返回响应数据的BODY部分（只会根据status检查请求是否成功，忽略对code的判断，这种情况下应由调用方检查请求是否成功）。
-   * data: 解构响应的BODY数据，只返回其中的data节点数据（会检查status和code是否为成功状态）。
+type ExtendOptions<T = any> = {
+  /**
+   * 参数序列化方式。预置的有
+   * - brackets: ids[]=1&ids[]=2&ids[]=3
+   * - comma: ids=1,2,3
+   * - indices: ids[0]=1&ids[1]=2&ids[2]=3
+   * - repeat: ids=1&ids=2&ids=3
+   */
+  paramsSerializer?:
+    | 'brackets'
+    | 'comma'
+    | 'indices'
+    | 'repeat'
+    | AxiosRequestConfig<T>['paramsSerializer'];
+  /**
+   * 响应数据的返回方式。
+   * - raw: 原始的AxiosResponse，包括headers、status等，不做是否成功请求的检查。
+   * - body: 返回响应数据的BODY部分（只会根据status检查请求是否成功，忽略对code的判断，这种情况下应由调用方检查请求是否成功）。
+   * - data: 解构响应的BODY数据，只返回其中的data节点数据（会检查status和code是否为成功状态）。
    */
   responseReturn?: 'body' | 'data' | 'raw';
 };
-type RequestClientConfig<T = any> = AxiosRequestConfig<T> & ExtendOptions;
+type RequestClientConfig<T = any> = AxiosRequestConfig<T> & ExtendOptions<T>;
 
 type RequestResponse<T = any> = AxiosResponse<T> & {
   config: RequestClientConfig<T>;