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


当前回答

没有外部包的解决方案

使用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 orderId = 1;
fetch('http://myapi.com/orders?order_id=' + orderId);

正如前面所回答的,这在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)
    ))
) || ''

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

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

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"

var paramsdate=01+'%s'+12+'%s'+2012+'%s';

request.get(“https://www.exampleurl.com?fromDate=”+paramsDate;