fetch api - 如何附加数组作为搜索参数

Question

我试图找出是否有正确的方法使用本机 Fetch 和 URL API 将数组附加到 url 搜索参数。例如 - 如果我想将一个或多个项目的数组附加到

list

参数。
目前我发现这个解决方案效果很好：

async function fetchList(array){
	const url = new URL('http://localhost:8080/some-route');
	
	array.forEach(item => url.searchParams.append('list[]', item));	

	const res = await fetch(url);
	return res.json();
}

fetchList(['item1','item2', 'item3'])

但是，我想知道是否有任何本机抽象可以让我不必迭代数组并将其每个项目附加到

'list[]'

（感觉有点hacky..）

Answer 1

没有内置方法可以批量添加到 URLSearchParams。要么它需要是一个使用

URLSearchParams#append()

的循环，如问题所示：

const array = ['item1', 'item2', 'item3'];

const url = new URL('http://localhost:8080/some-route');
array.forEach(item => url.searchParams.append('list[]', item));

console.log(url);

或者另一种选择可能是生成一个新的

URLSearchParams

对象，因为 构造函数采用任何生成键值对的可迭代对象:

const array = ['item1', 'item2', 'item3'];

const url = new URL('http://localhost:8080/some-route');

const newSearchParams = new URLSearchParams(array.map(x => ["list[]", x]));
url.search = newSearchParams;

console.log(url);

新对象需要分配给

URL#search

，因为

URL#searchParams

是只读的。

从技术上讲，

search

应该是一个字符串，并且

URLSearchParameters#toString()

被重载以提供兼容的搜索字符串。因此

url.search = newSearchParams.toString()

在形式上更正确，但是

toString()

无论如何都会被隐式转换使用，因此分配对象仍然具有相同的结果。