Axios post stay on pending

Question

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

Sakhi Mansoor · Answer 1 · 2018-08-24T12:34:01.740

2

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

edited Aug 24 '18 at 12:34

answered Aug 24 '18 at 11:46

Sakhi Mansoor

7,832
5
22
37

Now 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. – marcelo2605 Aug 24 '18 at 11:52
I 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. – Sakhi Mansoor Aug 24 '18 at 11:56
OK, I wil try this. Just another question: I'm running webservice on localhost:3456 and vue app on localhost:8080. This is a problem? – marcelo2605 Aug 24 '18 at 11:58
No 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 Aug 24 '18 at 12:00
make 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 https://stackoverflow.com/questions/40920179/should-i-refrain-from-handling-promise-rejection-asynchronously/40921505#40921505 – Sakhi Mansoor Aug 24 '18 at 12:06
1

Found the problem. My webservice expect code as a param. – marcelo2605 Aug 24 '18 at 12:19
But I test with your code and it not working. The parameter is not arriving in webservice. Could you see the code above? – marcelo2605 Aug 24 '18 at 12:24
which one is required Path varaible or Query Pram? Please specify – Sakhi Mansoor Aug 24 '18 at 12:26
I posted the Post route of webservice above. – marcelo2605 Aug 24 '18 at 12:33
are you using expressJs for server implementation ? – Sakhi Mansoor Aug 24 '18 at 12:36
No, I'm using Restify – marcelo2605 Aug 24 '18 at 12:37
I'm using bodyParser – marcelo2605 Aug 24 '18 at 12:39
bodyparser is for request body parsing. Try query parser as well. – Sakhi Mansoor Aug 24 '18 at 12:43
2

Fixed! Instead using `const { code }= req.params` on webservice, I changed to `const { code } = req.body` – marcelo2605 Aug 24 '18 at 13:04

score 0 · Answer 2 · edited Jul 29 '21 at 13:54

0

I also was facing the same. Network call was pending all the time and Mitigated it by passing the response back from server.js(route file) e.g(res.json(1);) and it resolved the issue

edited Jul 29 '21 at 13:54

Eric Aya

69,473
35
181
253

answered Jul 29 '21 at 13:52

Balaji

1
1

Axios post stay on pending

2 Answers2