Vue中axios GET请求如何正确传递数组参数？（数组.如何正确.请求.传递.参数.....）

wufei123 2025-03-01 阅读:71 评论:0

vue项目中使用axios进行get请求传递数组参数的最佳实践在Vue.js项目中，使用axios库发送GET请求时，直接传递数组参数到URL中可能会导致错误。本文将介绍一种可靠的方法，避免java.lang.IllegalArgume...

Vue中axios GET请求如何正确传递数组参数？

vue项目中使用axios进行get请求传递数组参数的最佳实践

在Vue.js项目中，使用axios库发送GET请求时，直接传递数组参数到URL中可能会导致错误。本文将介绍一种可靠的方法，避免java.lang.IllegalArgumentException: Invalid character found in the request target等错误，并确保数据正确传递到后端（例如Spring Boot）。

问题：直接传递数组参数的错误

尝试直接将数组作为GET请求参数传递，例如：

PHP

this.$axios.get('/searchRoomTags', {
  params: {
    roomTags: this.searchRoomTags // this.searchRoomTags is an array
  }
})

这种方式会导致URL格式错误，因为GET请求参数直接拼接在URL中，数组参数的格式不符合URL规范。

解决方案：使用join()方法将数组转换为逗号分隔的字符串

为了解决这个问题，最佳实践是将数组元素用逗号（或其他合适的分隔符）连接成一个字符串，然后将其作为GET请求参数传递。同时，需要处理数组为空的情况，避免错误。

改进后的前端代码如下：

PHP

this.$axios.get('/searchRoomTags', {
  params: {
    roomTags: (this.searchRoomTags || []).join(',')
  }
})

这段代码使用了join(',')方法将this.searchRoomTags数组转换为以逗号分隔的字符串。 (this.searchRoomTags || [])确保即使this.searchRoomTags为空，也不会导致错误。

后端代码修改 (Spring Boot示例)

相应的，后端Spring Boot代码也需要调整：

将@RequestParam String[] roomTags修改为@RequestParam String roomTags。然后在后端代码中，使用String.split(",")方法将接收到的字符串重新分割成数组：

PHP

@GetMapping("/searchRoomTags")
public PageInfo<rooms> searchRoomTags(@RequestParam String roomTags, Rooms room, HttpServletRequest request) {
    String[] tagsArray = roomTags.split(",");
    // ... 使用 tagsArray 数组 ...
}