使用不带 `[]` 的 vue-resource 对多个查询参数进行编码答案

【问题标题】：Encode multiple query parameters with vue-resource without `[]`s使用不带 `[]` 的 vue-resource 对多个查询参数进行编码
【发布时间】：2019-03-26 13:40:48
【问题描述】：

我正在使用 vue-resource's $http.get 通过以下方式查询 REST API：

this.$http.get('/api', {
    params: {
        id: [1,2,3],
    },
});

这会产生查询

/api?id[]=1&id[]=2&id[]=3

但我的端点期望

/api?id=1&id=2&id=3

有没有办法告诉vue-resource 像这样对多个参数进行编码？

我想避免构建自己的查询字符串，但这是我能想到的替代方案。

【问题讨论】：

我很困惑。如果您的端点路由是“/api”，那么参数将自动传递。如果您的端点是“/api/:id1/:id2/:id3”，您应该发出这样的请求this.$http.get(`/api/${id1}/${id2}/${id3}`)。在查询中也有相同的变量会导致错误。
我没有说/api/:id1/:id2/:id3，我说/api?id=1&id=2&id=3。引用维基百科，“While there is no definitive standard, most web frameworks allow multiple values to be associated with a single field”。我想知道vue-resource 是否可以满足将多个值传递给同一参数的不同标准。 id[] 类似于 PHP 的做法。 Mojolicious 的做法不同。欢迎来到狂野西部。 :-)
你说 /api?id=1&id=2&id=3 将转换为动态路由 /api/:id1/:id2/:id3。也许我错过了什么，但我正在努力帮助你
我不确定这种到动态路由的转换是从哪里来的。也许您正在考虑另一个后端 Web 框架的行为，而不是我正在使用的那个？跨度>

标签： vue.js vue-resource

【解决方案1】：

通过vue-resource的查询参数serialize函数的内部实现，我可以说-不，没有办法在vue-resource中自定义查询参数序列化函数。

no standard way 通过查询字符串传递一组值，因此格式更加特定于框架。虽然vue-resource 和axios 默认使用括号格式来序列化数组，但第二个允许通过paramsSerializer 选项配置自定义查询序列化功能。

猜测，没有标准的主要原因是因为在前端创建自定义函数来序列化查询参数非常容易。

您可以使用qs.js 库来解决您的问题

qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });

或者这里是来自another answer 的自定义函数示例，但已根据您的要求进行了修改：

JSFiddle

【讨论】：

感谢您的建议！我会考虑 Axios（我今天早些时候遇到的）、qs.js 并简单地构建我自己的查询字符串格式化程序。