为什么 javaScript 中的 "append" 方法不是 return 数组？

Question

这是一个 API 调用，它需要一些值来 return 一组特定的产品，

问题

"category_slug" 必须是一个数组，但出于某种原因，API 说它不是。这里有什么问题？

const url = new URL(
            "https://someApi/products"
        );
        
        let params = {
            "limit": "10",
            "page": "1",
            "category_slug": ["shoes"]
        };

        // "limit" is "how many products in on one page".
        // "page" is the fetched page with the specific "limited" products.

        //issue
        // "category_slug" is a specific products category, this has to be an array but for 
        //  some reason, the API says it's not. what is the problem here?
        
        Object.keys(params)
            .forEach(key => url.searchParams.append(key, params[key]));

        //here I'm appending the specific value in {params} to the URL.


        let headers = {
        "Accept": "application/json",
        "Content-Type": "application/json",
    };
        

        
        fetch(url, {
            method: "GET",
            headers: headers,
        })
            .then(response => response.json())
            .then(json => console.log(json));

Answer 1

你看，你对URLSearchParams这样美好的东西的期望太高了，同时又太少了。

太少了，因为通常您可以将整个 params 对象传递到其构造函数中，而不会在 keys、forEach 等上浪费时间...

const url = new URL('https://example.com/');
const params = {
  limit: 10,
  page: 1
};
url.search = new URLSearchParams(params); // yes, that easy

console.log(url.toString()); 
// https://example.com/?limit=10&page=1

太多了，因为 URLSearchParams 不适用于数组。当附加元素是数组时，它只是字符串化：

const url = new URL('https://example.com/');
const params = {
  slug: [1, 2, 3]
};
url.search = new URLSearchParams(params);
console.log(url); // https://example.com/?slug=1%2C2%2C3

在这种情况下，slug 参数得到了 1,2,3（[1, 2, 3].toString() 的结果）分配给它（并且所有逗号都被 urlencoded - 替换为 %2C 序列） .

您的 API 可能确实适用于此，但很有可能它希望以下列格式传递数组参数：

https://example.com/?slug=1&slug=2&slug=3

...即使这样也可能行不通，如果 API 期望数组参数在每个键上附加 [] 传递，如下所示：

https://example.com/?slug[]=1&slug[]=2&slug[]=3

所以你必须检查你的API（很难通过查看 crystal 球来调试这些东西，你知道...)，考虑到它的味道 - 并单独处理您的物品。例如，

const url = new URL('https://example.com/');
const params = {
  limit: 10,
  page: 1
};
url.search = new URLSearchParams(params);

const slugs = [1, 2, 3];
url.search += ['', ...slugs.map(
  slug => `category_slug[]=${encodeURIComponent(slug)}`)].join('&');

console.log(url.toString());

为什么 javaScript 中的 "append" 方法不是 return 数组？

Why does the "append" method in javaScript does not return an array?

javascript

fetch