Vue.js中使用axios.get请求传递数组参数的正确方法
在使用vue.js和axios进行get请求时，如何正确地传递数组参数是一个常见问题。本文将针对一个具体的案例，详细分析如何解决在get请求中传递数组参数导致的错误，并提供相应的解决方案。
问题描述：开发者尝试使用axios.get方法向后端发送一个包含数组对象的GET请求，请求参数中包含一个名为roomTags的数组。然而，在前端代码中直接将数组作为参数传递时，后端接收参数失败，并抛出java.lang.IllegalArgumentException异常，提示请求目标URL解析错误。
前端代码片段如下：
this.$axios
.get('/searchRoomTags', {
params: {
pageSize: this.roomPageInfo.pageSize,
roomType: encodeURI(this.roomForm.roomType),
roomTags: this.searchRoomTags,
roomState: this.searchContent
}
})
.then(Response => {
if (Response.data) {
this.searchSuccessHandle(Response)
}
})后端代码（Java Spring Boot）片段如下：
@CrossOrigin
@GetMapping("/searchRoomTags")
@ResponseBody
public PageInfo searchRoomTags(@RequestParam String[] roomTags, Rooms room, HttpServletRequest request) {
// ... 后端代码 ...
} 错误信息显示，请求URL中出现了无效字符，这是因为GET请求的参数直接传递数组导致的URL编码问题。 HTTP GET请求的参数必须是键值对的形式，数组参数在URL中会以roomTags[]=value1&roomTags[]=value2的形式出现，而直接传递数组会导致URL编码错误。
立即学习“前端免费学习笔记（深入）”；
解决方案：为了解决这个问题，需要将前端的数组参数转换成适合GET请求URL的格式。 一种简单有效的方案是将数组元素用特定分隔符连接成字符串，然后在后端再进行分割。 以下代码展示了修改后的前端代码：
this.$axios
.get('/searchRoomTags', {
params: {
pageSize: this.roomPageInfo.pageSize,
roomType: encodeURI(this.roomForm.roomType),
roomTags: (this.searchRoomTags || []).join(','), // 将数组元素用逗号连接成字符串
roomState: this.searchContent
}
})
.then(Response => {
if (Response.data) {
this.searchSuccessHandle(Response)
}
})通过join(',')方法将数组this.searchRoomTags转换为以逗号分隔的字符串，解决了GET请求参数传递数组的问题。 后端代码需要相应地修改，从请求参数中获取字符串，再将其分割成数组。 这需要根据后端语言和框架进行调整。 例如，在Java Spring Boot中，@RequestParam String[] roomTags 依然适用，框架会自动将逗号分隔的字符串解析成String数组。 如果使用其他分隔符，需要在前端和后端代码中保持一致。
