URLSearchParams 无法追加数组答案

【问题标题】：URLSearchParams fails to append arrayURLSearchParams 无法追加数组
【发布时间】：2020-09-26 11:50:07
【问题描述】：

您好，我在使用 URLSearchParams 发送数组时遇到问题。我的代码如下：

const worker = async(endpoint, method, parameters) => {
    let body;
    if (typeof parameters === 'object' && parameters !== null) {
        body = new URLSearchParams()
        for (const key in parameters) {
            body.append(key, parameters[key])
        }
    }

    try {
        const response = await fetch(endpoint, {
            method: method,
            body: body || null
        });

        const json = await response.json();
        if (json.status === 200) {
            return Promise.resolve(json.data)
        }

        return Promise.reject(json.message);
    } catch(error) {
        return Promise.reject('500 Encountered a server error')
    }
};

我迭代参数对象并创建一个新的URLSearchParams 对象。我的一个参数是一个数组，我在执行body.append(key, parameters[key]) 之前记录了该参数的值，它确实是一个数组：Array(1) ["user"]。但是，当我检查我的快速服务器并读取响应时，参数的值是"user" 而不是["user"]。我已经确认这不是我的快递服务器的问题，因为同样的请求适用于 Postman。我在这里做错了什么？

【问题讨论】：

标签： javascript express urlsearchparams

【解决方案1】：

您只能将 字符串 附加到 URL。

如果您将数组作为参数传递给append，它将被字符串化（隐式调用toString 方法，相当于.join(",")。

如果你想传递一个数据数组，那么你需要以某种方式对其进行编码。你如何做到这一点取决于你的后端期望数据如何被编码。

传统的方法是使用重复键：

const myArray = parameters[key];
myArray.forEach(value => body.append(key, value)

body-parser module 和 extended 选项支持的 PHP 方法是确保 key 以字符 [] 结尾，因此即使其中只有一项，数据也会被标记为数组。

const myArray = parameters[key];
myArray.forEach(value => body.append(`${key}[]`, value);

您暗示您希望该值包含方括号，这表明您希望对数组进行 JSON 编码，在这种情况下您必须明确地这样做：

 body.append(key, JSON.stringify(parameters[key]))

【讨论】：

我实际上是在尝试对请求进行 url 编码。我检查了我的邮递员，发现密钥确实需要[]，所以添加了这个if (Array.isArray(parameters[key])) { body.append(key + '[]', parameters[key])}，现在它可以工作了。谢谢！
@Kex — 只有在存在 single 值时才会起作用。您需要按照我的第二个示例遍历所有值。
是的，这也是循环的一部分。

【解决方案2】：

正如 Quentin 已经指出的，传递给 append 函数的所有内容都会被字符串化。如果您正在寻找一个自动将数组值附加为查询字符串中的多个条目/键的函数，请执行以下操作：

function convertToQueryUrl(obj: never): string {
    const params = new URLSearchParams(obj);
    for (const [key, value] of Object.entries(obj)) {
        if (Array.isArray(value)) {
            params.delete(key);
            value.forEach((v) => params.append(key, v));
        }
    }
    return params.toString();
}

【讨论】：