我正在尝试使用新的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中，是否有等效的方法来做到这一点?
当前回答
刚刚与Nativescript的fetchModule一起工作，并使用字符串操作找出了我自己的解决方案。 将查询字符串逐位附加到url。下面是一个示例，query作为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.
}
我测试了多个查询参数，它像一个魅力:) 希望这能帮助到一些人。
其他回答
也许这样更好:
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);
});
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"
模板文字在这里也是一个有效的选项，并提供了一些好处。
你可以包括原始字符串，数字，布尔值等:
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'
});
你可以从query-string中使用stringify。
import { stringify } from 'query-string';
fetch(`https://example.org?${stringify(params)}`)
刚刚与Nativescript的fetchModule一起工作，并使用字符串操作找出了我自己的解决方案。 将查询字符串逐位附加到url。下面是一个示例，query作为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.
}
我测试了多个查询参数，它像一个魅力:) 希望这能帮助到一些人。
