2017年3月更新:
URL.searchParams支持已正式登陆Chrome 51,但其他浏览器仍然需要polyfill。
使用查询参数的官方方法是将它们添加到URL。根据规范,这是一个示例:
var url = new URL("https://geo.example.org/api"),
params = {lat:35.696233, long:139.570431}
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
fetch(url).then(/* … */)
但是,我不确定Chrome是否支持searchParams
URL 的属性(在撰写本文时),因此您可能要使用第三方库或自备解决方案。
2018年4月更新:
使用URLSearchParams构造函数,您可以分配2D数组或对象,然后将其分配给,url.search
而不是遍历所有键并附加它们
var url = new URL('https://sl.se')
var params = {lat:35.696233, long:139.570431} // or:
var params = [['lat', '35.696233'], ['long', '139.570431']]
url.search = new URLSearchParams(params).toString();
fetch(url)
旁注:URLSearchParams
在NodeJS中也可用
const { URL, URLSearchParams } = require('url');
还有developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/…,在撰写本文时,它仍在通过规范,尚未得到很好的支持。而且该API更像Java,而不是JS。:/
有关接口的支持,请参见caniuse.com/#feat=urlsearchparams
URLSearchParams
。我会假设(尽管我不是100%肯定)红色的浏览器确实是URL
对象没有.searchParams
属性的浏览器。重要的是,Edge仍然没有支持。从文档中:“请注意,不建议使用URLSearchParams实例;不久,浏览器将仅使用USVString进行初始化。” 来源:developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/…
new URLSearchParams
似乎无法正确使用Array
属性。我希望它将属性转换array: [1, 2]
为array[]=1&array[]=2
,但是将其转换为array=1,2
。手动使用append
它的方法确实会导致array=1&array=2
,但是我必须遍历params对象,并且仅对数组类型执行此操作,而不是非常符合人体工程学的。它确实是错误添加的:) github.com/mdn/sprints/issues/2856