Skip to content

Instantly share code, notes, and snippets.

@akexorcist
Last active September 13, 2024 19:03
Show Gist options
  • Select an option

  • Save akexorcist/ea93ee47d39cf94e77802bc39c46589b to your computer and use it in GitHub Desktop.

Select an option

Save akexorcist/ea93ee47d39cf94e77802bc39c46589b to your computer and use it in GitHub Desktop.
Axios post method requesting with x-www-form-urlencoded content type. See https://axios-http.com/docs/urlencoded
const axios = require('axios')
/* ... */
const params = new URLSearchParams()
params.append('name', 'Akexorcist')
params.append('age', '28')
params.append('position', 'Android Developer')
params.append('description', 'birthdate=25-12-1989&favourite=coding%20coding%20and%20coding&company=Nextzy%20Technologies&website=http://www.akexorcist.com/')
params.append('awesome', true)
const config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
axios.post(url, params, config)
.then((result) => {
// Do somthing
})
.catch((err) => {
// Do somthing
})
@FeMaffezzolli
Copy link
Copy Markdown

Thanks!

@brjoaof
Copy link
Copy Markdown

brjoaof commented Dec 15, 2020

You should use URLSearchParams() with application/x-www-form-urlencoded according to axios documentation (https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format).

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

Thank you so much!!! It works in React Native

@xgqfrms
Copy link
Copy Markdown

xgqfrms commented Jan 4, 2021

🎉 awesome vanilla js solution

@brunodrugowick Thanks for your time.

  1. x-www-form-urlencoded
const queryString = new URLSearchParams();

queryString.append('param1', 'value1');
queryString.append('param2', 'value2');

axios.post('/foo', queryString);

// test
for(const item of queryString){
    console.log(item);
}

/*

["param1", "value1"]
["param2", "value2"]

*/
  1. multipart/form-data
const formData = new FormData();

formData.append('param1', 'value1');
formData.append('param2', 'value2');

axios.post('/foo', formData);

// test
for(const item of formData){
    console.log(item);
}

/*

["param1", "value1"]
["param2", "value2"]

*/

@akexorcist
Copy link
Copy Markdown
Author

Update the sample code follows the @brunodrugowick suggestion

@roachadam
Copy link
Copy Markdown

Thanks so much for this. No idea why this was so hard to find. I was using FormData instead of URLSearchParams.

@delivey
Copy link
Copy Markdown

delivey commented Jan 27, 2021

Thank you. Solved my issue.

@LMBernardo
Copy link
Copy Markdown

LMBernardo commented Feb 10, 2021

The following utility function should convert a JSON object form into x-www-form-urlencoded parameters. Seems to be working for me.

form_urlencode: function(form){
        const params = new URLSearchParams();
        for (let key in form) {
               if (form.hasOwnProperty(key)) {
                       params.append(key, form[key]);
                }
        }
        return params;
}

@bagaskarala
Copy link
Copy Markdown

thankssss

@josemfche
Copy link
Copy Markdown

you must serialize the query params:
see answer here

// using qs npm module
axios.post(url, qs.stringify(requestBody), config)
  .then((result) => {
    // Do somthing
  })
  .catch((err) => {
    // Do somthing
  })

THAAANKS!

@MikeyPenny
Copy link
Copy Markdown

You should use URLSearchParams() with application/x-www-form-urlencoded according to axios documentation (https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format).

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

My maaaan!!!

@nikita2206
Copy link
Copy Markdown

You don't have to call the append()... just pass in the object like this new URLSearchParams({"foo": "bar"}) - most of the time you'll be dealing with the object containing key-value pairs anyway.

@LMBernardo
Copy link
Copy Markdown

@nikita2206 Does this play nice with inherited properties?

@nikita2206
Copy link
Copy Markdown

@LMBernardo if hasOwnProperty("propertyFromAParent") returns true for the child then it does

@vargasjona
Copy link
Copy Markdown

Thanks a lot

@placideirandora
Copy link
Copy Markdown

Worked like a charm. Thank you!

@Treborium
Copy link
Copy Markdown

Awesome thank you! You saved me after 5h of debugging and googling 🙌 👍

@wanwe
Copy link
Copy Markdown

wanwe commented Jan 9, 2022

Thanks !

@mulhoon
Copy link
Copy Markdown

mulhoon commented Jan 18, 2022

👍

@Gaeta
Copy link
Copy Markdown

Gaeta commented Jan 29, 2022

👍

@duzzisantos
Copy link
Copy Markdown

import qs from 'qs
and qs.stringify() worked like magic. Thanks for redirecting me to the github page of axios promises. Thanks!

@amirgholikhani
Copy link
Copy Markdown

@vassiliy278
Copy link
Copy Markdown

Thank's a lot dude! I've beated the issue for 5 hours and finally solved!

@neogeogre
Copy link
Copy Markdown

Nice !

@abelfriasdiaz
Copy link
Copy Markdown

Thank you soooo much for this!

@xchopox
Copy link
Copy Markdown

xchopox commented Apr 24, 2022

Thank you so much for this solution 🙌 🥺

@ugurcanerdogan
Copy link
Copy Markdown

Very much thanks !

@NashChenEzTable
Copy link
Copy Markdown

nice

Copy link
Copy Markdown

ghost commented Jun 21, 2022

Thanks!

@rodrigoaveloes
Copy link
Copy Markdown

nice bro! thi

import qs from 'qs and qs.stringify() worked like magic. Thanks for redirecting me to the github page of axios promises. Thanks!

Exactly what I did, I found it more easier

@vinayaksapa
Copy link
Copy Markdown

Thanks ! :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment