发送带有axios的数组.Get作为参数是未定义的

Question

我正在制作一个带有额外参数选项的get请求，因为我在过滤器上使用该请求，所以参数是用于获取返回内容的过滤器:

const res = await axios.get("http://localhots:3000/getsomedata", {
params: {
firstFilter: someObject,
secondFilter: [someOtherObject, someOtherObject]
}
});

请求顺利通过，在另一端，当我执行console.log(req.query);时，我看到以下内容:

{
firstFilter: 'someObject',
'secondFilter[]': ['{someOtherObject}', '{someOtherObject}'],
}

如果我做req.query.firstFilter工作得很好，但req.query.secondFilter不工作，为了让我得到数据，我必须用req.query["secondFilter[]"]来做，是否有一种方法可以避免这种情况，并能够用req.query.secondFilter获得我的数据数组?

我现在的解决方法是:

const filter = {
firstFilter: req.query.firstFilter,
secondFilter: req.query["secondFilter[]"]
}

它当然可以工作，但是我不喜欢它，我肯定错过了什么。

Answer 1

一些解析查询字符串的工具期望数据数组被编码为array_name=1&array_name=2。

这可能是一个问题，如果你有一个或多个项目，因为它可能是一个数组，也可能是一个字符串。

为了避免这个问题，PHP要求数据数组被编码为array_name[]=1&array_name[]=2，并且如果您留下[]，则将丢弃除最后一项外的所有内容(因此您总是得到一个字符串)。

许多通过HTTP生成提交数据的客户端库决定采用一种与PHP兼容的方式(很大程度上是因为PHP过去和现在都非常普遍)。

所以你需要:

• 更改后端以能够解析PHP样式
• 更改对axios的调用，使其不生成PHP样式

---

后台h1> 体取决于你使用的后端，但看起来你可能正在使用Express.js。

查看设置

您可以通过将其设置为"extended"来打开扩展(php风格)查询解析。(虽然这是默认值)

const app = express()
app.set("query parser", "extended");

---

前端h1> axios文档说:

// `paramsSerializer` is an optional function in charge of serializing `params`
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function (params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},

所以你可以重写

const res = await axios.get("http://localhots:3000/getsomedata", {
params: {
firstFilter: someObject,
secondFilter: [someOtherObject, someOtherObject]
},
paramsSerializer: (params) => Qs.stringify(params, {arrayFormat: 'repeat'})
});

我的例子需要qs模块

Answer 2

这与HTTP GET方法的参数没有正确序列化有关。记住，GET没有"body"。参数类似于POST，它是一个文本URL。

有关更多信息，我参考这个答案，它通过代码片段提供了更详细的信息。