URLSearchParams无法追加数组

Question

嗨，我在用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"]。我已经确认这不是我的快递服务器的问题，因为同样的请求在邮递员中是有效的。我在这里做错什么了？

Answer 1

只能将字符串附加到URL。

如果将数组作为参数传递给append，则将对数组进行字符串化(通过对toString方法的隐式调用，这相当于.join(",") )。

如果您想传递一个数据数组，那么您需要对它进行某种编码。如何做到这一点取决于后端期望如何对数据进行编码。

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

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

PHP方法是由带有extended选项的体解析模块支持的，它确保字符[]中的键结束，以便将数据标记为数组，即使其中只有一个项。

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

您暗示希望值包含方括号，这意味着您希望对数组进行JSON编码，在这种情况下，您必须显式地这样做：

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

Answer 2

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

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();
}