Vue.js asynchronous api call with axios

Question

I have two different version of code but I am having trouble understanding why the second version is not working correctly. I think this is a "context" problem, but I don't understand.

In this version I get the response

// Fist version (it works)
methods: {
      async sendDatas() {
            await this.$axios({
                method: 'post',
                url: '/url',
                data: {
                    email: this.email,
                },
            })
                .then((response) => {
                    console.log(response)
                })
                .catch((error) => {
                    console.log(error)
                })
        },

In this version i can't get the response data in callApi function

sendDatas() {
            this.callApi(this.email)
                .then((response) => {
                    // Here "response" is "undefined"
                    console.log(response)
                })
                .catch((error) => {
                    console.log(error)
                })
        },

        async callApi(email) {
            await this.$axios({
                method: 'post',
                url: '/url',
                data: {
                    email,
                },
            })
                .then((response) => {
                    // Here "response" is ok"
                    console.log(response)
                })
                .catch((error) => {
                    console.log(error)
                })
        },

The async callApi function returns a promise, why can't I get the content of the response in the sendDatas function?

Thanks for your help :)

papillon · Accepted Answer · 2021-04-23 10:20:25Z

2

Your function callApi does not return the promise. You need to return it:

    sendDatas() {
        this.callApi(this.email)
            .then((response) => {
                // Here "response" is "undefined"
                console.log(response)
            })
            .catch((error) => {
                console.log(error)
            })
    },

    callApi(email) {
        return this.$axios({ // Note the return here
            method: 'post',
            url: '/url',
            data: {
                email,
            },
        })
            .then((response) => {
                // Here "response" is ok"
                console.log(response)
            })
            .catch((error) => {
                console.log(error)
            })
    },

Also, note that I removed the await and async keywords, which are not required since you're already using then and catch to handle the result.

answered Apr 23, 2021 at 10:20

papillon

2,0884 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BibDev Over a year ago

Yes it's good :) Why remove the keyword "async", I thought it was essential to declare an asynchronous request. Then we always get a result in the form of a promise. @papillon

papillon Over a year ago

@BibDev the only use of the async keyword, as far as i know, is to enable using the await keyword inside of it. If you don't need to use await, then u probably don't need to use async either. Also, an async function always return a promise. If it is supposed to return a value other than a promise, then it returns it as a resolved promise, which explains why you could use .then on the result of your function even though you had not explicitely returned a promise from it. If u wanna learn more I suggest reading this doc which is really well explained: javascript.info/async-await

Djave · Accepted Answer · 2021-04-23 10:19:48Z

1

I'm pretty sure you are returning the promise twice. Can you try:

sendDatas() {
            this.callApi(this.email)
                .then((response) => {
                    // Here "response" is "undefined"
                    console.log(response)
                })
                .catch((error) => {
                    console.log(error)
                })
        },

        async callApi(email) {
            // Removed the `then`
            return this.$axios({
                method: 'post',
                url: '/url',
                data: {
                    email,
                },
            });
        },

answered Apr 23, 2021 at 10:19

Djave

9,4298 gold badges79 silver badges137 bronze badges

1 Comment

BibDev Over a year ago

Thank you ! :) It work with return await this.$axios({

Collectives™ on Stack Overflow

Vue.js asynchronous api call with axios

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related