我正在尝试使用新的Fetch API:
我像这样做一个GET请求:
var request = new Request({
url: 'http://myapi.com/orders',
method: 'GET'
});
fetch(request);
但是，我不确定如何向GET请求添加查询字符串。理想情况下，我希望能够做出一个GET请求到一个URL像:
'http://myapi.com/orders?order_id=1'
在jQuery中，我可以通过传递{order_id: 1}作为$.ajax()的数据参数来做到这一点。在新的Fetch API中，是否有等效的方法来做到这一点?
当前回答
模板文字在这里也是一个有效的选项，并提供了一些好处。
你可以包括原始字符串，数字，布尔值等:
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'
});
其他回答
模板文字在这里也是一个有效的选项，并提供了一些好处。
你可以包括原始字符串，数字，布尔值等:
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'
});
var paramsdate=01+'%s'+12+'%s'+2012+'%s';
request.get（“https：//www.exampleurl.com？fromDate=”+paramsDate;
简洁、现代的方法:
fetch('https://example.com?' + new URLSearchParams({
foo: 'value',
bar: 2,
}))
它是如何工作的:当一个字符串(例如URL)与URLSearchParams的实例连接时，它的toString()方法将自动被调用，以将实例转换为字符串表示，这恰好是一个正确编码的查询字符串。如果自动调用toString()对您来说太神奇了，您可能更喜欢像这样显式地调用它:' + new URLSearchParams(…).toString())
一个带查询参数的获取请求的完整示例:
//你可以复制粘贴的例子。 // jsonplaceholder.typicode.com提供了一个虚拟的rest-api //为了这个目的。 异步函数doAsyncTask() { url = ( “https://jsonplaceholder.typicode.com/comments?”+ new URLSearchParams({postId: 1}).toString() ）; Const result = await fetch(url) .then(response => response.json()); console.log(' fetch from: ' + url); console.log(结果); } doAsyncTask ();
如果您正在使用/支持……
IE: Internet Explorer does not provide native support for URLSearchParams or fetch, but there are polyfills available. Node: As of Node 18 there is native support for the fetch API (in version 17.5 it was behind the --experimental-fetch flag). In older versions, you can add the fetch API through a package like node-fetch. URLSearchParams comes with Node, and can be found as a global object since version 10. In older version you can find it at require('url').URLSearchParams. Node + TypeScript: If you're using Node and TypeScript together you'll find that, due to some technical limitations, TypeScript does not offer type definitions for the global URLSearchParams. The simplest workaround is to just import it from the url module. See here for more info.
没有外部包的解决方案
使用fetch api执行GET请求，我在这个解决方案中工作，不需要安装包。
这是一个调用谷歌的映射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
也许这样更好:
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);
});
