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

Answer 1

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

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

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

传统方法是使用重复键：

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

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

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

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

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

Answer 2

正如 Quentin 已经指出的那样，传递给附加函数的所有内容都会被字符串化。如果您正在寻找一个自动将数组值附加为查询字符串中的多个 entries/keys 的函数，请看这里：

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

URLSearchParams 无法追加数组

URLSearchParams fails to append array

javascript

express

urlsearchparams