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

Share:
10,626
marcelo2605
Author by

marcelo2605

Updated on December 06, 2022

Comments

  • marcelo2605
    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
    marcelo2605 over 5 years
    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.
  • Sakhi Mansoor
    Sakhi Mansoor over 5 years
    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.
  • marcelo2605
    marcelo2605 over 5 years
    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?
  • Sakhi Mansoor
    Sakhi Mansoor over 5 years
    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
    Sakhi Mansoor over 5 years
    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 stackoverflow.com/questions/40920179/…
  • marcelo2605
    marcelo2605 over 5 years
    Found the problem. My webservice expect code as a param.
  • marcelo2605
    marcelo2605 over 5 years
    But I test with your code and it not working. The parameter is not arriving in webservice. Could you see the code above?
  • Sakhi Mansoor
    Sakhi Mansoor over 5 years
    which one is required Path varaible or Query Pram? Please specify
  • marcelo2605
    marcelo2605 over 5 years
    I posted the Post route of webservice above.
  • Sakhi Mansoor
    Sakhi Mansoor over 5 years
    are you using expressJs for server implementation ?
  • marcelo2605
    marcelo2605 over 5 years
    No, I'm using Restify
  • marcelo2605
    marcelo2605 over 5 years
    I'm using bodyParser
  • Sakhi Mansoor
    Sakhi Mansoor over 5 years
    bodyparser is for request body parsing. Try query parser as well.
  • marcelo2605
    marcelo2605 over 5 years
    Fixed! Instead using const { code }= req.params on webservice, I changed to const { code } = req.body