CODEWITHSUNDEEP
javascriptfetchaxios
user3379893
user3379893

Reputation: 193

How do I POST data and parameters like in Axios, using Fetch API

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.

Upvotes: 3

Views: 7774

Answers (5)

Blake Bell
Blake Bell

Reputation: 377

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.com?" + $.param({foo: "bar", baz: "kuuq"}) fetch(url)

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

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

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.com/github/fetch/issues/256

Upvotes: 0

zero298
zero298

Reputation: 26867

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.com");

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.com/?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.

Upvotes: 7

Akrion
Akrion

Reputation: 18515

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

Upvotes: 0

Vitor M. Barbosa
Vitor M. Barbosa

Reputation: 3646

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

Upvotes: 0

Ziyo
Ziyo

Reputation: 604

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

Upvotes: 0

Related Questions