时间戳

首页 > 解决方案 > 使用 axios.get 作为参数发送数组是未定义的

javascript - 使用 axios.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[]"]
}

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

标签： javascriptaxios

解决方案

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

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

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

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

所以你需要：

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

后端

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

查看设置。

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

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

前端

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 模块

推荐阅读