Home / Questions / 290294
Accepted
Kenny Barrera
Asked: 2020-09-04 14:00:19 +0800 CST 2020-09-04 14:00:19 +0800 CST

How do I return a value in a Vue.js method that uses axios?

  • 772

My method looks like this:

createTip: function (tip) {
        this.$axios.post(this.$API_URL + 'tips', {
            name: tip.name,
            description: tip.description
        }, {
            headers: {
                'Api-Token': this.$store.state.token
            }
        })
        .then( (response) => {
            this.tip_temporal.tip_id = response.data.tip_id
            this.$toastr.success('The Tip has been created successfully!', "Success!");
            this.finishAction()
        })
        .catch(error => {
            this.errorAction(error)
        });
    },

What I want to do is, instead of assigning

this.tip_temporal.tip_id = response.data.tip_id

my method can return that value, something like this:

return response.data.tip_id

The idea is that somewhere else in the code I can do something like this:

let id = this.createTip(tip)

I tried to do the returnin thenof the promise that generates axios, but as we all know, promises are asynchronous, so whenever I try to assign the value that the method should return, it assigns me an undefined value.

Any ideas?

vue.js

1 Answers

  1. Best Answer

    I use promise with async and await functions so that it waits for the results and assigns them, when you call it with another function it also has to be async and await. I recommend reading a little more about promise since it is a fairly complex topic.

    createTip: async function (tip) {
       let respuesta = await new Promise((resolve,reject)=>{
        this.$axios.post(this.$API_URL + 'tips', {
            name: tip.name,
            description: tip.description
        }, {
            headers: {
                'Api-Token': this.$store.state.token
            }
        })
        .then( (response) => {
            resolve(response.data.tip_id)
        })
        .catch(error => {
            reject(error)
        });
})
return respuesta;
    },
    • 1