Fetch: Document usage for GET requests with URI parameters

[theefer]

The spec does not document any way to specify GET query parameters (e.g. search?q=unicorns&limit=10&foobar) for a request. GET is the most common case but in practice, query parameters may be used with any HTTP method.

As I understand, the way to do this is using URLSearchParams from the URL spec. It would be good to provide a clearer view of how these two APIs fit together, especially as query strings are often supported directly by the high-level XHR APIs that fetch is meant to replace (e.g. jQuery.ajax or reqwest), often as a data option for example.

In general, it feels like it would be really great to have a boilerplate-free way to use only native web APIs to do such common things as passing URI parameters.

See also this Twitter thread.

[annevk]

Edit: see https://fetch.spec.whatwg.org/#fetch-api for a working example.

Example could be something like:

var url = new URL("https://example.org/api"),
    params = { first: "x", second: "y" }
Object.keys(params).forEach((key, value) => { url.searchParams.append(key, value) })
fetch(url).then(/* ... */)

[zuk]

URL objects don't seem to have a .searchParams property, at least not in Chrome 48.

[domenic]

That's a Chrome bug, not really relevant to the spec.

[zuk]

For better or worse, this page is the first result when you google "whatwg fetch url params". Just trying to save future googlers some potentially wasted time.

[kopz9999]

@annevk, the URL objects do not have that .searchParams property. These are the fixes it requires:

function urlWithParams(urlString, params={}) {
  var url = new URL(urlString);
  var searchParams = new URLSearchParams();
  Object.keys(params).forEach((key) => {
    searchParams.append(key, params[key]);
  });
  url.search = searchParams.toString();
  return url.toString();
}

Object.keys will return an array and the values will be lost in the foreach callback. I leave this function that maybe useful for those who want to add params to a url

[domenic]

See the last three comments prior to yours.

[kopz9999]

I just wanted to leave here a working example ...

[domenic]

Ah, that makes sense! Hopefully Chrome fixed their bug soon...

[kopz9999]

Agreed :)

[annevk]

@kopz9999 has worked in Firefox for ages. \o/

[kopz9999]

@annevk, I agree on the part of searchParams in Firefox, but this part is wrong:

Object.keys(params).forEach((key, value) => { url.searchParams.append(key, value) })

This part will always put the index as a value: "https://example.org/api?first=0&second=1"
I just wanted to leave a working example since this page is one of the first results thrown by google

[annevk]

Ah I see, updated my comment to point to the standard where that is fixed.

[kopz9999]

Yes, I think that is already fixed on this repo: https://github.com/whatwg/fetch
But google brings this page :P

[micabe]

superagent is much simpler, \o/