How to use async/await in Vue.js? How to use async/await in Vue.js? vue.js vue.js

How to use async/await in Vue.js?


You have to use either then or await not both as shown below:

If using then

created () {    this.getA().then((result) => {            console.log(1)            console.log(2)            this.getB()        })},methods : {    getA () {        return $axios.post(`/getA`,params);    },    getB (){        console.log(3)    }}

If using await

async created (){    await this.getA()    console.log(1)    console.log(2)    this.getB() },methods : {    getA : async() => {        return $axios.post(`/getA`,params);    },    getB : () => {        console.log(3)    }}

Note that while calling getB() you don't need then or await since it is not asynchronous


Unlike what @thanthu said, you can use both then and await.In your first post you only missed to add return in the getA method:

async created (){    await this.getA()    console.log(2)    await this.getB() },methods : {    getA() {        return $axios            .post(`/getA`,params){            .then((result) => {                console.log(1)            });    },    getB() {         console.log(3)    }}


try this

async created (){    let resultFromgetA = await this.getA()    console.log(2)    await this.getB() },methods : {    getA :() =>{        return $axios.post(`/getA`,params);    },    getB : async() =>{        //use await key with async calls        console.log(3)    }}