Axios post stay on pending
10,626
I think there's issue with your axios request structure. Try this:
const URL = *YOUR_URL*;
axios(URL, {
method: 'POST',
headers: {
'content-type': 'application/json',
},
data: *YOUR_PAYLOAD*,
})
.then(response => response.data)
.catch(error => {
throw error;
});
If you're sending a query param:
axios(URL, {
method: 'POST',
headers: {
'content-type': 'application/json',
},
params: {
code: 'your_string'
},
})
if it is path variable you can set your url:
const url = `http://localhost:3456/${code}`
Let me know if the issue still persists
Author by
marcelo2605
Updated on December 06, 2022Comments
-
marcelo2605 over 1 year
This is a simple Post request using Axios inside Vue:
import axios from 'axios' export default { name: 'HelloWorld', props: { msg: String }, mounted () { const code = 'test' const url = 'http://localhost:3456/' axios.post(url, code, { headers: {'Content-type': 'application/x-www-form-urlencoded', } }).then(this.successHandler).catch(this.errorHandler) }, methods: { successHandler (res) { console.log(res.data) }, errorHandler (error) { console.log(error) } } }
The Get method works fine. But Post stay as "Pending" on Network tab. I can confirm that there is a Post method on my webservice and it return something (tested on Postman).
UPDATE
Sending code as a param:
axios(url, { method: 'POST', headers: { 'content-type': 'application/json', }, params: { code : 'test' }, }).then(this.successHandler).catch(this.errorHandler)
WEBSERVICE
server.post('/', (req, res, next) => { const { code } = req.params const options = { validate: 'soft', cheerio: {}, juice: {}, beautify: {}, elements: [] } heml(code, options).then( ({ html, metadata, errors }) => { res.send({metadata, html, errors}) next() }) })
-
marcelo2605 over 5 yearsNow something happens. But it's an error: code: "InvalidContent", message: "Invalid JSON: Unexpected token e in JSON at position 1". My webservice expect a parameters called code and it's must be a string.
-
Sakhi Mansoor over 5 yearsI would recommend to stick with application/json content type. You should send {code: 'your_string'} and on server side you would get a JSON and you can retrieve 'code' key from request payload. The issue with your post request is fixed it's an issue with parsing.
-
marcelo2605 over 5 yearsOK, I wil try this. Just another question: I'm running webservice on localhost:3456 and vue app on localhost:8080. This is a problem?
-
Sakhi Mansoor over 5 yearsNo that's not the problem you're in the same domain network. Unless you deploy it somewhere then you need to enable CORS for development purpose. I hope this would clarify most of the things, Let me know if you have any other query. happy to help
-
Sakhi Mansoor over 5 yearsmake sure that you use both 'then' and 'catch' Otherwise you will not handle errors and you will get that warning. check out this you would get the basic understanding stackoverflow.com/questions/40920179/…
-
marcelo2605 over 5 yearsFound the problem. My webservice expect code as a param.
-
marcelo2605 over 5 yearsBut I test with your code and it not working. The parameter is not arriving in webservice. Could you see the code above?
-
Sakhi Mansoor over 5 yearswhich one is required Path varaible or Query Pram? Please specify
-
marcelo2605 over 5 yearsI posted the Post route of webservice above.
-
Sakhi Mansoor over 5 yearsare you using expressJs for server implementation ?
-
marcelo2605 over 5 yearsNo, I'm using Restify
-
marcelo2605 over 5 yearsI'm using bodyParser
-
Sakhi Mansoor over 5 yearsbodyparser is for request body parsing. Try query parser as well.
-
marcelo2605 over 5 yearsFixed! Instead using
const { code }= req.params
on webservice, I changed toconst { code } = req.body