Javascript 使用Fetch GET请求设置查询字符串

我正在尝试使用新的：

我正在做一个

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\u id:1}

作为

$.ajax（）的
数据
参数来实现这一点。是否有一种与新的
获取API
相同的方法来实现这一点？
2017年3月更新：

Chrome51已经正式提供了支持，但其他浏览器仍然需要一个新的浏览器


使用查询参数的正式方法是将它们添加到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是否支持URL的
searchParams
属性（在撰写本文时），因此您可能希望使用或

2018年4月更新：

通过使用，您可以分配一个2D数组或一个对象，并将其分配给
url。搜索
，而不是在所有键上循环并附加它们

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中是不可能的。但我必须指出：

如果您在
节点
，则会出现
查询字符串
包。它可以字符串化/解析对象/查询字符串：

var querystring = require('querystring')
var data = { key: 'value' }
querystring.stringify(data) // => 'key=value'

…然后将其附加到要请求的url


但是，上面的问题是，您始终必须在前面加一个问号（
？
）。因此，另一种方法是使用nodes
url
包中的
parse
方法，如下所示：

var url = require('url')
var data = { key: 'value' }
url.format({ query: data }) // => '?key=value'

请参见处的查询

这是可能的，因为它在内部只是：

也许这样更好：

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'
});

encodeQueryString-将对象编码为querystring参数
您可以从中使用
#stringify

简明的ES6方法：

fetch('https://example.com?' + new URLSearchParams({
    foo: 'value',
    bar: 2,
}))

函数的作用是：将查询参数转换为可以附加到URL上的字符串。在本例中，toString（）在与URL连接时被隐式调用。您可能希望显式调用toString（）以显示您的意图

IE不支持URLSearchParams（或fetch），但有

如果使用node，您可以通过类似的包添加fetchapi。URLSearchParams随节点一起提供，从版本10开始可以作为全局对象找到。在旧版本中，您可以在
require（'url'）找到它。URLSearchParams
只是在使用Nativescript的fetchModule，并使用字符串操作找到了我自己的解决方案。
将查询字符串逐位追加到url。下面是一个示例，其中查询作为json对象传递（query={order\u id:1}）：

函数performGetHttpRequest（fetchLink=）http://myapi.com/orders，query=null）{
如果（查询）{
fetchLink+='？'；
让计数=0；
const queryLength=Object.keys（查询）.length；
for（让输入查询）{
fetchLink+=key+'='+query[key]；
fetchLink+=（计数

我在多个查询参数上对此进行了测试，效果非常好：）
希望这对某人有所帮助。
var paramsdate=01+'%s'+12+'%s'+2012+'%s'

请求。获取（“+paramsDate；”
不带外部包的解决方案
为了使用fetchapi执行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
还有，尽管在写这篇文章时，它仍在通过规范，而且还没有得到很好的支持。API更像Java而不是JS。：/See以获取对
URLSearchParams
接口的支持；我假设（尽管我不是100%确定）红色的浏览器正是那些
URL
对象不具有
.searchParams
属性的浏览器。重要的是，Edge仍然没有支持。从文档中可以看出：“请注意，使用URLSearchParams实例是不推荐的；很快浏览器将只对init使用USVString。”源：
新的URLSearchParams
似乎不能正确使用
数组
属性。我希望它能将属性
数组：[1,2]
转换为
数组[]=1&Array[]=2
，但将其转换为
array=1,2
。手动使用它的
append
方法确实会导致
array=1&array=2
，但我必须迭代params对象，并且仅对数组类型执行此操作，不太符合人体工程学。它确实是在错误中添加的：）值得确认的是，这只适用于整数类型。如果使用字符串，特别是用户提供的字符串（如搜索条件），则必须转义字符串，否则如果字符串中出现
/
、
+
或
&
等字符，则可能会得到奇怪的结果。使用请求对象会有所帮助，特别是如果您希望使用函数来构建
import { stringify } from 'query-string';

fetch(`https://example.org?${stringify(params)}`)

fetch('https://example.com?' + new URLSearchParams({
    foo: 'value',
    bar: 2,
}))

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.
}

// 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()

https://maps.googleapis.com/maps/api/geocode/json?key=asdkf%C3%B1laskdGE&address=evergreen%20avenue&city=New%20York