285

我正在尝试使用新的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}作为data参数传递来做到这一点$.ajax()。有没有等效的方法可以用 new 做到这一点Fetch API

4

12 回答 12

302

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 是否支持searchParamsURL 的属性(在撰写本文时),因此您可能想要使用第三方库自己动手解决方案

2018 年 4 月更新:

通过使用URLSearchParams 构造函数,您可以分配一个 2D 数组或一个对象,然后将其分配给,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');
于 2016-01-27T13:50:45.443 回答
287

简洁、现代的方法:

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

URLSearchParams 的 toString()函数会将提供的查询参数转换为字符串。在 JavaScript 中,当您将对象与字符串连接时,该对象的 toString() 函数将自动为您调用。您可能希望更明确地了解此处发生的情况,并选择在将两个值连接在一起之前自己调用 .toString() ,如下所示:fetch('https://...' + new URLSearchParams(...).toString())


IE 不支持 URLSearchParams(或 fetch),但有可用的polyfills

如果使用 node,您可以通过node-fetch之类的包添加 fetch API 。URLSearchParams 带有节点,从版本 10 开始可以作为全局对象找到。在旧版本中,您可以在require('url').URLSearchParams.

如果你同时使用 node 和 typescript,你会发现,由于一些技术限制,typescript 不提供全局 URLSearchParams 的类型定义。最简单的解决方法是从 URL 模块导入它。请参阅此处了解更多信息。

于 2019-10-17T17:30:30.280 回答
40
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)
  });
于 2017-02-06T22:19:30.813 回答
30

正如已经回答的那样,这对于 -API 来说是不可能的fetch。但我必须注意:

如果你在node,那里有querystring包裹。它可以字符串化/解析对象/查询字符串:

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

...然后只需将其附加到要请求的 url。


但是,上面的问题是,您总是必须在前面加上一个问号 ( ?)。因此,另一种方法是使用parse节点url包中的方法并按如下方式执行:

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

参阅queryhttps://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-18T20:17:47.873 回答
13

您可以使用#stringify来自查询字符串

import { stringify } from 'query-string';

fetch(`https://example.org?${stringify(params)}`)
于 2018-06-30T13:46:25.673 回答
8

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"
于 2018-03-16T21:32:43.257 回答
6

我知道这是在说绝对显而易见的,但我觉得值得将其添加为答案,因为它是最简单的:

const orderId = 1;
fetch('http://myapi.com/orders?order_id=' + orderId);
于 2017-04-19T02:35:15.480 回答
5

也许这样更好:

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);
});
于 2017-03-30T08:24:14.627 回答
4

无外部包的解决方案

使用 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

于 2020-09-24T02:46:04.773 回答
2

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

您可以包含原始字符串、数字、布尔值等:

    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-29T20:07:50.357 回答
0

刚刚使用 Nativescript 的 fetchModule 并使用字符串操作找出了我自己的解决方案。将查询字符串逐位附加到 url。这是一个示例,其中查询作为 json 对象传递(查询 = {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-10T22:34:37.587 回答
-6

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

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

于 2020-01-31T12:29:42.293 回答