当我们向后端发送HTTP请求时，常常需要通过查询字符串将一些信息传递给服务器。查询字符串是一种在URL中传递数据的方式，它由问号和键值对组成，例如：https://example.com/search?q=keyword&page=1&limit=10
在某些情况下，我们可能需要在查询字符串中使用多个具有相同名称的字段。这可能会导致问题，因为大多数后端框架只能处理单个键名对应单个键值的情况。如何解决这个问题呢？本篇文章将介绍两种主要的解决方案。
解决方案一：使用数组
第一种解决方案是使用数组来存储具有相同名称的字段。例如，我们可以将查询字符串改为以下形式：
https://example.com/search?q=keyword&category[]=book&category[]=movie
在这个例子中，我们将category改为一个包含两个元素的数组。在后端框架中，你可以按照常规方法访问数组来读取这些值：
const categories = req.query.category; // 返回 ['book', 'movie']
这种方法的好处是简单易懂，不需要额外的编码工作，而且可以直接利用后端框架提供的内置解析功能。
解决方案二：使用对象
第二种解决方案是使用对象来存储具有相同名称的字段。例如，我们可以将查询字符串改为以下形式：
https://example.com/search?q=keyword&category[0]=book&category[1]=movie
在这个例子中，我们将category改为一个包含两个元素的对象。在后端框架中，你可以按照常规方法访问对象来读取这些值：
const categories = req.query.category; // 返回 {0: 'book', 1: 'movie'}如果你想要将对象转换为数组，可以使用Object.values()方法：
const categories = Object.values(req.query.category); // 返回 ['book', 'movie']
这种方法的好处是更加灵活，因为它允许你在键名上添加任意数量的属性，而不仅仅是数字索引。
总结
无论你选择使用数组还是对象来处理具有相同名称的字段，都可以有效地解决这个问题。选择哪种解决方案取决于你的需求和后端框架的支持情况。不过需要注意的是，在前端发送请求时要遵循后端接口的参数规范，以免产生不必要的麻烦。
下面是使用axios发送带有重复键名的查询参数示例代码：
-- -------------------- ---- -------
--------------------------------------- -
------- -
-- ----------
------------- -------- -------- -- ---- -------------- ------- -------------- -------
-
---------------- -- -
---------------------------
-------------- -- -
---------------------
---希望本篇文章能够帮助你更好地理解和应用查询字符串中重复键名的处理方法！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/606ef1a92d2a29a3c12028b2