查询参数键中的方括号

Question

我需要从使用方括号作为参数名称一部分的 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
)

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

Answer 1

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

Node 也有一个类似的模块

axios 也支持传递 URLSearchParams 对象作为 params 参数

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)

Answer 2

一种解决方法可能是这样的：

myParams = new URLSearchParams();
myParams.append("filter[number]", "mynumber");
myParams.append("filter[id]", "someId");
myParams.toString().replace(/%5B/g, '[').replace(/%5D/g, ']');
console.log(myParams);

控制台日志应显示：

'filter[number]=mynumber&filter[id]=someId'