我正在尝试使用新的Fetch API：
我正在发出这样的GET 请求：
var request = new Request({
url: 'http://myapi.com/orders',
method: 'GET'
});
fetch(request);
但是，我不确定如何将查询字符串添加到 GET 请求。理想情况下，我希望能够向URL 发出GET 请求，例如：
'http://myapi.com/orders?order_id=1'
在jQuery 中，我可以通过将{order_id: 1} 作为$.ajax() 的data 参数传递来做到这一点。新的Fetch API 有没有等效的方法？
【问题讨论】：
标签： javascript jquery http fetch-api
2017 年 3 月更新：
URL.searchParams 支持已正式登陆 Chrome 51，但其他浏览器仍需要polyfill。
官方使用查询参数的方式只是将它们添加到 URL 中。来自the spec，这是一个例子：
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 是否支持 URL 的 searchParams 属性（在撰写本文时），因此您可能希望使用 third party library 或 roll-your-own solution。
2018 年 4 月更新：
使用URLSearchParams constructor，您可以分配一个二维数组或一个对象，然后将其分配给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');
【讨论】：
URLSearchParams 接口的支持；我会假设（尽管我不是 100% 确定）红色的浏览器正是URL 对象不具有.searchParams 属性的浏览器。重要的是，Edge 仍然没有支持。
new URLSearchParams 似乎无法与 Array 属性一起正常工作。我希望它将属性array: [1, 2] 转换为array[]=1&array[]=2，但将其转换为array=1,2。手动使用它的append 方法确实会导致array=1&array=2，但我必须遍历 params 对象，并且只对数组类型这样做，不是很符合人体工程学。
正如已经回答的那样，这对于 fetch-API 来说是不可能的。但我必须注意：
如果您使用node，则有querystring 包。它可以字符串化/解析对象/查询字符串：
var querystring = require('querystring')
var data = { key: 'value' }
querystring.stringify(data) // => 'key=value'
...然后将其附加到要请求的 url。
但是，上面的问题是，您总是必须在前面加上一个问号 (?)。因此，另一种方法是使用节点url 包中的parse 方法，并按如下方式执行：
var url = require('url')
var data = { key: 'value' }
url.format({ query: data }) // => '?key=value'
见queryhttps://nodejs.org/api/url.html#url_url_format_urlobj
这是可能的，因为它在内部只是this：
search = obj.search || (
obj.query && ('?' + (
typeof(obj.query) === 'object' ?
querystring.stringify(obj.query) :
String(obj.query)
))
) || ''
【讨论】：
let params = {
"param1": "value1",
"param2": "value2"
};
let query = Object.keys(params)
.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
.join('&');
let url = 'https://example.com/search?' + query;
fetch(url)
.then(data => data.text())
.then((text) => {
console.log('request succeeded with JSON response', text)
}).catch(function (error) {
console.log('request failed', error)
});
【讨论】：
也许这样更好：
const withQuery = require('with-query');
fetch(withQuery('https://api.github.com/search/repositories', {
q: 'query',
sort: 'stars',
order: 'asc',
}))
.then(res => res.json())
.then((json) => {
console.info(json);
})
.catch((err) => {
console.error(err);
});
【讨论】：
我知道这是绝对显而易见的，但我觉得值得添加这个作为答案，因为它是最简单的：
const orderId = 1;
fetch('http://myapi.com/orders?order_id=' + orderId);
【讨论】：
/、+ 或 & 等字符，则会得到奇怪的结果。跨度>
模板文字在这里也是一个有效的选项，并提供一些好处。
您可以包含原始字符串、数字、布尔值等：
let request = new Request(`https://example.com/?name=${'Patrick'}&number=${1}`);
您可以包含变量：
let request = new Request(`https://example.com/?name=${nameParam}`);
您可以包含逻辑和功能：
let request = new Request(`https://example.com/?name=${nameParam !== undefined ? nameParam : getDefaultName() }`);
就构造较大查询字符串的数据而言，我喜欢使用连接到字符串的数组。我发现它比其他一些方法更容易理解：
let queryString = [
`param1=${getParam(1)}`,
`param2=${getParam(2)}`,
`param3=${getParam(3)}`,
].join('&');
let request = new Request(`https://example.com/?${queryString}`, {
method: 'GET'
});
【讨论】：
+ 或 & 之类字符的变量，那么它将无法按预期工作，并且您最终会得到与您想象的不同的参数和值。
/**
* Encode an object as url query string parameters
* - includes the leading "?" prefix
* - example input — {key: "value", alpha: "beta"}
* - example output — output "?key=value&alpha=beta"
* - returns empty string when given an empty object
*/
function encodeQueryString(params) {
const keys = Object.keys(params)
return keys.length
? "?" + keys
.map(key => encodeURIComponent(key)
+ "=" + encodeURIComponent(params[key]))
.join("&")
: ""
}
encodeQueryString({key: "value", alpha: "beta"})
//> "?key=value&alpha=beta"
【讨论】：
你可以从query string使用#stringify
import { stringify } from 'query-string';
fetch(`https://example.org?${stringify(params)}`)
【讨论】：
简洁、现代的方法：
fetch('https://example.com?' + new URLSearchParams({
foo: 'value',
bar: 2,
}))
URLSearchParams's toString() 函数会将提供的查询参数转换为字符串。在 JavaScript 中，当您将对象与字符串连接时，该对象的 toString() 函数将自动为您调用。您可能希望更明确地了解此处发生的情况，并选择在将两个值连接在一起之前自己调用 .toString() ，如下所示：fetch('https://...' + new URLSearchParams(...).toString())
IE不支持URLSearchParams（或fetch），但是有polyfillsavailable。
如果使用节点，您可以通过 node-fetch 之类的包添加 fetch API。 URLSearchParams 带有节点，从版本 10 开始可以作为全局对象找到。在旧版本中，您可以在 require('url').URLSearchParams 找到它。
如果你同时使用 node 和 typescript，你会发现，由于一些技术限制，typescript 不提供全局 URLSearchParams 的类型定义。最简单的解决方法是从 URL 模块导入它。请参阅here 了解更多信息。
【讨论】：
new URLSearchParams({foo: ['bar', 'baz']}) 但不是 foo=bar&foo=baz 它被转义为 foo=bar%Cbaz
s = new URLSearchParams({foo: 'bar'}); s.append('foo', 'baz'); s.toString()。或者，构造函数可以采用列表列表而不是对象。 new URLSearchParams([['foo', 'bar'], ['foo', 'baz']]).toString()查看文档页面了解更多使用信息：developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
https://example.com?${new URLSearchParams({foo: 'value'})} ``` developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
刚刚使用 Nativescript 的 fetchModule 并使用字符串操作找到了我自己的解决方案。 将查询字符串逐位附加到 url。这是一个将查询作为 json 对象传递的示例 (query = {order_id: 1})：
function performGetHttpRequest(fetchLink='http://myapi.com/orders', query=null) {
if(query) {
fetchLink += '?';
let count = 0;
const queryLength = Object.keys(query).length;
for(let key in query) {
fetchLink += key+'='+query[key];
fetchLink += (count < queryLength) ? '&' : '';
count++;
}
}
// link becomes: 'http://myapi.com/orders?order_id=1'
// Then, use fetch as in MDN and simply pass this fetchLink as the url.
}
我在多个查询参数上对此进行了测试，它就像一个魅力:) 希望这对某人有所帮助。
【讨论】：
var paramsdate=01+'%s'+12+'%s'+2012+'%s';
request.get("https://www.exampleurl.com?fromDate="+paramsDate;
【讨论】：
使用 fetch api 执行 GET 请求，我在这个不需要安装包的解决方案上工作。
这是调用 google 地图 api 的示例
// encode to scape spaces
const esc = encodeURIComponent;
const url = 'https://maps.googleapis.com/maps/api/geocode/json?';
const params = {
key: "asdkfñlaskdGE",
address: "evergreen avenue",
city: "New York"
};
// this line takes the params object and builds the query string
const query = Object.keys(params).map(k => `${esc(k)}=${esc(params[k])}`).join('&')
const res = await fetch(url+query);
const googleResponse = await res.json()
随意复制此代码并将其粘贴到控制台上，看看它是如何工作的！！
生成的 url 类似于：
https://maps.googleapis.com/maps/api/geocode/json?key=asdkf%C3%B1laskdGE&address=evergreen%20avenue&city=New%20York
这是我在决定写这篇文章之前一直在寻找的东西，享受吧：D
【讨论】：