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

我正在尝试使用新的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中，是否有等效的方法来做到这一点?

当前回答

2017年3月更新:

URL。searchParams支持已正式登陆Chrome 51，但其他浏览器仍然需要polyfill。

使用查询参数的正式方法是将它们添加到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月更新:

使用URLSearchParams构造函数，您可以分配一个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');

2016-01-27 13:50:45

其他回答

模板文字在这里也是一个有效的选项，并提供了一些好处。

你可以包括原始字符串，数字，布尔值等:

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

2017-09-29 20:07:50

正如前面所回答的，这在fetch-API中是不可能实现的。但我必须指出:

如果你在node上，有querystring包。它可以stringify/解析对象/查询字符串:

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

.．.然后把它附加到url请求。

然而，上面的问题是，您总是必须在前面加上一个问号(?)。所以，另一种方法是使用解析方法从节点url包，并做如下:

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

参见https://nodejs.org/api/url.html#url_url_format_urlobj查询

这是可能的，因为它内部是这样做的:

search = obj.search || (
    obj.query && ('?' + (
        typeof(obj.query) === 'object' ?
        querystring.stringify(obj.query) :
        String(obj.query)
    ))
) || ''

2016-02-18 20:17:47

你可以从query-string中使用stringify。

import { stringify } from 'query-string';

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

2018-06-30 13:46:25

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

我测试了多个查询参数，它像一个魅力:) 希望这能帮助到一些人。

2020-01-10 22:34:37