Take the following Axios example:

axios.post(this.reportURL, reportData, {
  params: {
    param1: paramValue1,
    param2: paramValue2
  },
});

How can I do the same thing using fetch API? I see that parameters are done like this:

fetch(this.reportURL, {
  method: "POST",
  body: "param1=paramValue1&param2=paramValue2",
  headers: 
    {
      "Content-Type": "application/x-www-form-urlencoded"
    }

})

Since the body key is being used to store the parameters, do I need to serialize my entire reportData object and concatenate it to the existing parameters?

I don't understand why Fetch API is using the body key for parameters.

Additionally, this is not my own API and I cannot change the expected POST request.

Take the following Axios example:

axios.post(this.reportURL, reportData, {
  params: {
    param1: paramValue1,
    param2: paramValue2
  },
});

How can I do the same thing using fetch API? I see that parameters are done like this:

fetch(this.reportURL, {
  method: "POST",
  body: "param1=paramValue1&param2=paramValue2",
  headers: 
    {
      "Content-Type": "application/x-www-form-urlencoded"
    }

})

Since the body key is being used to store the parameters, do I need to serialize my entire reportData object and concatenate it to the existing parameters?

I don't understand why Fetch API is using the body key for parameters.

Additionally, this is not my own API and I cannot change the expected POST request.

• javascript
• fetch
• axios

• Unless I am misreading the axios docs, those are not same. The first, will append those params as a URL params i.e. example.?p1=foo&p2=bar. The second will append the body as the actual body of the request, not as part of the URL. Which one are you trying to do. – zero298 Commented Aug 20, 2018 at 16:46
• You cannot extract the pieces you need from reportData and create your own object to pass to fetch? What do you mean you cannot change the POST request? – Akrion Commented Aug 20, 2018 at 16:48
• @zero298 I am trying to do both, as the API requires parameters as well as JSON data. – user3379893 Commented Aug 20, 2018 at 16:54
• @Akrion I can create my own object, I guess I am wondering if what you suggested is indeed the correct approach to this. – user3379893 Commented Aug 20, 2018 at 16:55

5 Answers 5

Frustratingly, fetch() does not really provide a "clean" way to provide query string URL parameters. You have to just put them in the URL that you are fetching directly. It's a point of contention that you can read about on the GitHub: How to pass url query params? #256.

There are a few ways that you can simulate it:

const url = new URL("http://www.example.");

const params = {
  foo: "bar",
  fizz: "buzz"
};

const data = {
  more: "data",
  that: "I",
  want: "to",
  send: "please"
};

Object.entries(params).forEach(([k, v]) => url.searchParams.append(k, v));
console.log(url);

fetch(url, { // URL as http://www.example./?foo=bar&fizz=buzz
  method: "POST",
  body: JSON.stringify(data) // The actual body
});

Since you have application/x-www-form-urlencoded in your question as well, you may want to take a look at this question also: Post a x-www-form-urlencoded request from React Native.

You can do body: JSON.stringify({ param1: paramValue1, param2: paramValue2 })

It looks like you're close, but on the second example, as you're making a POST request, the parameters will usually go on the body of the request as JSON:

fetch(this.reportURL, {
  method: "POST",
  body: JSON.stringify({
    param1: paramValue1,
    param2: paramValue2
  })    
})

You can extract the pieces from reportData into another object and pass that one to fetch by JSON.stringify it.

Fetch also supports FormData but that is not that much different that the object approach I already mentioned.

As per the docs you could specify the body as the following:

1. ArrayBuffer
2. ArrayBufferView (Uint8Array and friends)
3. Blob/File
4. string
5. URLSearchParams
6. FormData

If you need to construct query param string from a hash and you use jQuery on your site, you can do:

var url = "http://www.abx.?" + $.param({foo: "bar", baz: "kuuq"}) fetch(url)

Here is what the fetch standard remends in their documentation (also see discussion in whatwg/fetch#56):

var url = new URL("https://geo.example/api"), params = {lat:35.696233, long:139.570431} Object.keys(params).forEach(key => url.searchParams.append(key, params[key])) fetch(url).then(...)

This requires that the browser implements url.searchParams. A polyfill might be needed for older browsers.

Read over this quickly, but hopefully that helped

Src: https://github./github/fetch/issues/256