feat: 请求函数加上数组query 转换

meadmin-cn · Jan 7, 2023 · 39fa3f9 · 39fa3f9
1 parent ba826aa
commit 39fa3f9
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
     "pinia": "^2.0.14",
+    "qs": "^6.11.0",
     "vue": "^3.2.25",
     "vue-i18n": "^9.1.10",
     "vue-request": "^2.0.0-rc.2",
@@ -56,6 +57,7 @@
     "@types/node": "^18.0.1",
     "@types/nprogress": "^0.2.0",
     "@types/path-browserify": "^1.0.0",
+    "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.33.1",
     "@typescript-eslint/parser": "^5.33.1",
     "@vitejs/plugin-vue": "^4.0.0",

diff --git a/src/api/example.ts b/src/api/example.ts
@@ -8,6 +8,7 @@ const enum Api {
 export interface ListParams {
   page: number;
   size: number;
+  createTime?: [string, string];
 }
 export interface ListResult {
   total: number;

diff --git a/src/utils/request.ts b/src/utils/request.ts
@@ -4,10 +4,12 @@ import axios, { AxiosRequestConfig } from 'axios';
 import { ElMessage } from 'element-plus';
 import log from './log';
 import { useRequest, Options, setGlobalOptions } from 'vue-request';
+import qs from 'qs';
 const t = (...args: [string | number]) => useGlobalStore().i18n.t(...args);
 const service = axios.create({
   baseURL: '/api/', // url = base url + request url
   timeout: 10000, // request timeout
+  paramsSerializer: (params) => qs.stringify(params, { arrayFormat: 'repeat' }), // 数组query参数转换为repeat a=1&a=2
 });
 // 请求拦截器
 service.interceptors.request.use(

diff --git a/src/views/example/request.vue b/src/views/example/request.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="request">
     请求示例 1
-    <el-button @click="run({ page: 2, size: 2 })">请求</el-button>
+    <el-button @click="run({ page: 2, size: 2, createTime: ['2023-01-07', '2023-01-08'] })">请求</el-button>
     <el-button @click="run({ page: 0, size: 10 })">error请求</el-button>
     <div>
       loading:<code>{{ loading }}</code> error:<code>{{ JSON.stringify(error) }}</code> data:<code>{{