无需外部包装的解决方案

Question

我正在尝试使用新的Fetch API：https://developer.mozilla.org/en/docs/Web/API/Fetch_API

我正在发出这样的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_id: 1}作为data的{{1}}参数传递来实现此目的。使用新的Fetch API有没有相同的方法呢？

Answer 1

2017年3月更新：

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

使用查询参数的官方方法只是将它们添加到URL中。从the spec开始，这是一个例子：

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是否支持网址的searchParams属性（在撰写本文时），因此您可能希望使用third party library或roll-your-own solution。< / p>

2018年4月更新：

使用URLSearchParams constructor你可以分配一个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)

fetch(url)

旁注：NodeJS中也提供URLSearchParams

const { URL, URLSearchParams } = require('url');

Answer 2

正如已经回答的那样，这是fetch - API无法实现的。但我必须注意：

如果您在node，则会有querystring个包裹。它可以字符串化/解析对象/查询字符串：

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

...然后将其附加到请求的网址。

但是，上述问题是，您始终必须添加问号（?）。所以，另一种方法是使用节点parse包中的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

上查看query

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

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

Answer 3

let params = {
  "param1": "value1",
  "param2": "value2"
}

let query = Object.keys(params)
             .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
             .join('&');

let url = 'https:example.com//xyz.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)
  })

Answer 4

一种简洁的ES6方法：

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

URLSearchParam's toString（）函数会将查询参数转换为可附加到URL的字符串。在此示例中，当toString（）与URL串联时，将隐式调用它。

IE不支持此功能，但是有polyfills可用。

Answer 5

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"

Answer 6

您可以使用query string中的#stringify

import { stringify } from 'query-string';

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

Answer 7

也许这更好：

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

Answer 8

我知道这说明绝对明显，但我觉得值得补充一点，因为这是最简单的：

var orderId = 1;
var request = new Request({
  url: 'http://myapi.com/orders?order_id=' + 1,
  method: 'GET'
});
fetch(request);

Answer 9

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

您可以包含原始字符串，数字，布尔值等：

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

Answer 10

无需外部包装的解决方案

使用我在此解决方案上工作的提取API来执行 GET 请求，而无需安装软件包。

这是调用Google Map 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()

随意复制此代码并将其粘贴到控制台上以查看其工作原理！

生成的网址类似于：

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

这就是我决定写这篇文章之前一直在寻找的内容，请享受：D

Answer 11

仅使用Nativescript的fetchModule并使用字符串操作找出了自己的解决方案。将查询字符串一点一点地追加到URL。这是一个将查询作为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.
}

我在多个查询参数上对此进行了测试，它的工作原理很吸引人：) 希望这对某人有帮助。

Answer 12

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

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

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

12 个答案:

encodeQueryString - 将对象编码为查询字符串参数

无需外部包装的解决方案