Giter Site home page Giter Site logo

Comments (14)

zuk avatar zuk commented on August 17, 2024 21

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.

from fetch.

kopz9999 avatar kopz9999 commented on August 17, 2024 10

@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

from fetch.

domenic avatar domenic commented on August 17, 2024 5

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

from fetch.

micabe avatar micabe commented on August 17, 2024 5

superagent is much simpler, \o/

from fetch.

annevk avatar annevk commented on August 17, 2024 2

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(/* ... */)

from fetch.

zuk avatar zuk commented on August 17, 2024

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

from fetch.

domenic avatar domenic commented on August 17, 2024

See the last three comments prior to yours.

from fetch.

kopz9999 avatar kopz9999 commented on August 17, 2024

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

from fetch.

domenic avatar domenic commented on August 17, 2024

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

from fetch.

kopz9999 avatar kopz9999 commented on August 17, 2024

Agreed :)

from fetch.

annevk avatar annevk commented on August 17, 2024

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

from fetch.

kopz9999 avatar kopz9999 commented on August 17, 2024

@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

from fetch.

annevk avatar annevk commented on August 17, 2024

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

from fetch.

kopz9999 avatar kopz9999 commented on August 17, 2024

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

from fetch.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.