使用 Fetch GET 请求设置查询字符串
Setting query string using Fetch GET request
我正在尝试使用新的 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 是否有等效的方法？
2017 年 3 月更新：
URL.searchParams support has officially landed in Chrome 51, but other browsers still require a 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 or 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');
正如已经回答的那样，根据规范，fetch-API 还不可能做到这一点。但我要注意：
如果您使用的是 node，则有 querystring 套餐。它可以 stringify/parse objects/querystrings:
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'
参见 https://nodejs.org/api/url.html#url_url_format_urlobj
中的 query
这是可能的，因为它在内部只是 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=`);
您可以包含变量：
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'
});
encodeQueryString — 将对象编码为查询字符串参数
/**
* 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,
}))
工作原理：当字符串（例如URL）与URLSearchParams, its toString()方法的实例连接时，将自动调用转换实例转换为字符串表示形式，恰好是正确编码的查询字符串。如果 toString() 的自动调用对您来说太神奇了，您可能更愿意像这样显式调用它：fetch('https://...' + new URLSearchParams(...).toString())
带有查询参数的提取请求的完整示例：
// Real example you can copy-paste and play with.
// jsonplaceholder.typicode.com provides a dummy rest-api
// for this sort of purpose.
async function doAsyncTask() {
const url = (
'https://jsonplaceholder.typicode.com/comments?' +
new URLSearchParams({ postId: 1 }).toString()
);
const result = await fetch(url)
.then(response => response.json());
console.log('Fetched from: ' + url);
console.log(result);
}
doAsyncTask();
如果你是using/supporting...
IE: Internet Explorer 不提供对 URLSearchParams 或 fetch 的原生支持，但有 polyfills available.
Node: 从 Node 18 开始，原生支持获取 API（在版本 17.5 中它落后于 --experimental-fetch 旗帜）。在旧版本中，您可以通过像 node-fetch 这样的包添加获取 API。 URLSearchParams 是 Node 自带的，从版本 10 开始可以作为全局对象找到。在旧版本中，您可以在 require('url').URLSearchParams.
找到它
Node + TypeScript: 如果你同时使用 Node 和 TypeScript 你会发现，由于一些技术限制，TypeScript 不提供类型全局 URLSearchParams 的定义。最简单的解决方法是从 url 模块导入它。有关详细信息，请参阅 here。
刚刚使用 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
我正在尝试使用新的 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 是否有等效的方法？
2017 年 3 月更新：
URL.searchParams support has officially landed in Chrome 51, but other browsers still require a 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 or 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');
正如已经回答的那样，根据规范，fetch-API 还不可能做到这一点。但我要注意：
如果您使用的是 node，则有 querystring 套餐。它可以 stringify/parse objects/querystrings:
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'
参见 https://nodejs.org/api/url.html#url_url_format_urlobj
中的query
这是可能的，因为它在内部只是 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=`);
您可以包含变量：
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'
});
encodeQueryString — 将对象编码为查询字符串参数
/**
* 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,
}))
工作原理：当字符串（例如URL）与URLSearchParams, its toString()方法的实例连接时，将自动调用转换实例转换为字符串表示形式，恰好是正确编码的查询字符串。如果 toString() 的自动调用对您来说太神奇了，您可能更愿意像这样显式调用它：fetch('https://...' + new URLSearchParams(...).toString())
带有查询参数的提取请求的完整示例：
// Real example you can copy-paste and play with.
// jsonplaceholder.typicode.com provides a dummy rest-api
// for this sort of purpose.
async function doAsyncTask() {
const url = (
'https://jsonplaceholder.typicode.com/comments?' +
new URLSearchParams({ postId: 1 }).toString()
);
const result = await fetch(url)
.then(response => response.json());
console.log('Fetched from: ' + url);
console.log(result);
}
doAsyncTask();
如果你是using/supporting...
IE: Internet Explorer 不提供对 URLSearchParams 或 fetch 的原生支持，但有 polyfills available.
Node: 从 Node 18 开始，原生支持获取 API（在版本 17.5 中它落后于
找到它--experimental-fetch旗帜）。在旧版本中，您可以通过像 node-fetch 这样的包添加获取 API。 URLSearchParams 是 Node 自带的，从版本 10 开始可以作为全局对象找到。在旧版本中，您可以在require('url').URLSearchParams.Node + TypeScript: 如果你同时使用 Node 和 TypeScript 你会发现，由于一些技术限制，TypeScript 不提供类型全局 URLSearchParams 的定义。最简单的解决方法是从
url模块导入它。有关详细信息，请参阅 here。
刚刚使用 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