查询参数键中的方括号

Posted 2023-03-10

【中文标题】查询参数键中的方括号

【英文标题】：square brackets in query parameter keys

【发布时间】：2021-01-03 22:14:50

【问题描述】：

我需要从使用方括号作为参数名称一部分的 API 获取数据。 API不是我写的，所以不要拍信使！

编辑：我应该注意到，这段代码将在节点（服务器端）上运行，而不是在浏览器中。

我在 javascript 中使用 Axios，这是我的 axios 调用：

axios.get(url, params: queryParams)
    .then(res => 
        brands = res.data;
        console.log(res.data);
    )
    .catch(error => 
        console.log( '\n\n\n\n')
        console.log(error);
    );

参数如下。为简洁起见，我展示了我尝试过的三种不同格式（直接字符、转义和 ASCII 编码），但在每次尝试中，我都以相同的格式传递了三个参数。

Set the query parameters
let queryParams = 
    "tables": table,
    "manifest": manifest,
    "where[0][0]": field,
    "where%5B0%5D%5B1%5D": "%3D",
    "where\\[0\\]\\[2\\]": searchValue,
    "ordery_by": "id%2C%20ASC",
    "limit": "100",
    "app": "json",
    'client_key': authkey

在所有情况下，axios 似乎都将参数转换为 javascript web 令牌。

另一方面，如果我将参数作为字符串连接到 URL，则请求有效，并且我得到了预期的数据。

let fullPath = url.concat(
    "?tables=", table,
    "&manifest=", manifest,
    "&where%5B0%5D%5B0%5D=", field,
    "&where%5B0%5D%5B1%5D=", "%3D",
    "&where%5B0%5D%5B2%5D=", searchValue,
    "&ordery_by=", "id%2C%20ASC",
    "&limit=", "100",
    "&app=", "json",
    "&client_key=", authkey
)

虽然我有一个变通解决方案（如上所示），但有没有办法使用适当的参数对象来做到这一点？

【问题讨论】：

Axios 不会编码方括号并被明确忽略。有一个PR，但是还没有合并进去。 github.com/axios/axios/issues/3316

【参考方案1】：

如果您在浏览器中执行此操作，您可以使用 URLSearchParams() 迭代人类可读的对象并让它创建查询字符串。

Node 也有类似的模块

axios 也支持传递URLSearchParams object as params argument

let queryParams = 
    "tables": 1,
    "manifest": 2,
    "where[0][0]": 3,
    "where[0][1]": "=",
    "where[0][2]": 4,
    "ordery_by": "id,ASC",
    "limit": "100",
    "app": "json",
    'client_key': 'abc'


const sParams = new URLSearchParams(Object.entries(queryParams));

console.log('query string')
console.log(sParams.toString())
console.log('sParam entries')
console.log(JSON.stringify([...sParams]))

.as-console-wrapper    max-height: 100%!important;top:0;

更进一步，您可以使用 URL 构造函数构造完整的 url

const url = new URL('https://myApi.com')
url.search = new URLSearchParams(Object.entries(queryParams));

console.log(url.href)

【讨论】：

我没有时间尝试这些选项，但我会在接下来的几天内尝试。谢谢！

我有时间尝试使用 URLSearchParams 和 URL 构造函数，但它仍然以同样的方式失败。很奇怪。

Axios 不会编码方括号并被明确忽略。有一个PR，但是还没有合并进去。 github.com/axios/axios/issues/3316