前端get接口params怎么直接传数组

### 前端 GET 请求 Params 直接传递数组的方法 在前端开发中，通过 `GET` 请求的 `params` 参数直接传递数组是一种常见的需求。以下是具体方法及其实现方式： #### 方法一：重复参数名的方式 当使用 `GET` 请求发送数组时，可以通过多次附加相同的键来表示数组中的多个值。这种方式通常由后端框架自动解析为数组。 例如，在 Vue 中可以借助 Axios 的默认行为完成此操作[^2]： ```javascript axios.get('/example', { params: { ids: [1, 2, 3] } }); ``` 上述代码会生成如下 URL： ``` /example?ids=1&ids=2&ids=3 ``` 这种形式能够被大多数后端框架（如 Spring Boot 使用 `@RequestParam` 注解的情况）正确识别并转换成数组或列表类型的数据结构。 #### 方法二：使用逗号分隔字符串的形式 另一种常见做法是将整个数组序列化为单个以特定字符（通常是英文逗号 `,`）连接起来的字符串。随后再交由服务器端自行拆分为独立项处理。 继续以上述例子为例，则可通过手动调整参数设置达成目标效果[^1]: ```javascript const params = new URLSearchParams(); params.append('ids', '1,2,3'); fetch('/example?' + params.toString(), { method: 'GET' }); // 或者利用Axios库简化写法 axios.get('/example', { params: { ids: '1,2,3' } }); ``` 最终形成的查询串将是这样的样子： ``` /example?ids=1%2C2%2C3 ``` 需要注意的是，采取这种方法的前提条件在于服务端有能力依据指定分割符重构原始集合数据。 #### 方法三：自定义序列化逻辑 对于更加复杂的场景或者希望保持高度兼容性的项目而言，可能需要引入额外工具辅助完成更精细控制下的参数编码过程。比如基于第三方类库 `qs` 实现定制化的解决方案[^3]: 下面展示了一个典型的应用案例片段： ```javascript import axios from 'axios'; import qs from 'qs'; axios.interceptors.request.use(config => { if (config.method === 'get') { config.paramsSerializer = params => qs.stringify(params, { arrayFormat: 'repeat' }); // 设置arrayFormat选项为'repeat' } return config; }); export function handCompletedRequest(ids) { return axios({ url: '/kqgl/ddjl/dealCompleted', method: 'get', params: { ids }, }); } ``` 在此基础上调用函数 `handCompletedRequest([4,5,6])` 将会产生形似 `/kqgl/ddjl/dealCompleted?ids=4&ids=5&ids=6` 这样的请求路径[^4]。 --- ### 总结 综上所述，有三种主要途径可用于解决前端 `GET` 接口携带数组作为查询参数的需求——即分别采用多实例同名变量表达法、单一字段内嵌入联合符号以及依赖外部插件执行高级转化策略这几种手段之一即可满足实际应用场景的要求。