【问题标题】：Sending an array with axios.get as params is undefined未定义使用 axios.get 作为参数发送数组
【发布时间】：2021-07-29 12:38:42
【问题描述】：

我正在使用其他参数选项发出获取请求，因为我在过滤器上使用该请求，所以参数是用于返回的过滤器：

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[]"]
}

它当然有效，但我不喜欢它，我肯定错过了一些东西。

【问题讨论】：

标签： javascript axios

【解决方案1】：

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

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

为避免该问题，PHP 要求将数据数组编码为 array_name[]=1&array_name[]=2，如果您将 [] 留在外面，则会丢弃除最后一项之外的所有数据（因此您总是会得到一个字符串）。

许多生成数据以通过 HTTP 提交的客户端库决定以与 PHP 兼容的方式这样做（主要是因为 PHP 曾经并且非常普遍）。

所以你需要：

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

后端

具体情况取决于您使用的后端，但看起来您可能正在使用 Express.js。

见the settings。

您可以通过将其设置为“扩展”来打开扩展（PHP 样式）查询解析（尽管这是默认设置）

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

前端

axios documentation 说：

  // `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 module

【讨论】：

【解决方案2】：

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

更多信息我参考this answer，它提供了代码sn-ps的更详细信息。

【讨论】：