0
313
ViewsHow to send form data through get request in fetch api
I was having an API where I am calling a get request to send to query parameters through form data but I am getting get request doesn't take form data. How to do it
http://ihub-fastapi-solubility.herokuapp.com/predict?solute=CC(C)(C)Br&solvent=CC(C)(C)O this is the URL and solute and solvent are the query parameters.
const onSubmit = (e) => {
e.preventDefault(); // <-- prevent the default form action
const formData = new FormData();
formData.set("solute", solutestate); // <-- local component state
formData.set("solvent", solventstate); // <-- local component state
console.log({ formData });
fetch("http://ihub-fastapi-solubility.herokuapp.com/predict", {
method: "get",
body: formData,
}).catch((err) => {
setError(err.error);
console.log(err);
});
When I tried with post I got this error
·
Juan Pablo Isaza
1 answers
Answer question0
FormData isn't the best choice here as that is primarily used in constructing multipart/form-data request payloads for use in POST, PUT and PATCH requests.
Use URLSearchParams instead to easily construct query parameters and serialise it into the URL...
const fetch = function fakeFetch(url, init) {
console.log(init.method, url)
}
const solutestate = "CC(C)(C)Br"
const solventstate = "CC(C)(C)O"
const params = new URLSearchParams({
solute: solutestate,
solvent: solventstate
})
fetch(`http://ihub-fastapi-solubility.herokuapp.com/predict?${params}`, {
method: "GET"
})Using URLSearchParams has the added benefit of correctly URL encoding your data.
·
Juan Pablo Isaza
Report
Answer question