使用没有 `[]` 的 vue-resource 编码多个查询参数

Question

我正在使用 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 像这样对多个参数进行编码？

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

Answer 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 的自定义函数示例，但根据您的要求进行了修改：

Encode multiple query parameters with vue-resource without `[]`s