Как использовать async / await в Vue.js?

Question

Я новичок в ES7

Я хочу использовать async / await в Vue.js

Вот мой код

created (){
    this.getA()
    console.log(2)
    this.getB() 
},
methods : {
    getA (){
        console.log(1)
    },
    getB (){
        console.log(3)
    }
}

Возвращается

1
2
3

Но когда я использую его с axios, тогда

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

Возвращает

2
3
1

Поэтому я хочу добавить асинхронный / ожидающий в этот код.

Как я могу использовать async / await?

Я пытался

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

Возвращает тот же результат.

Answer 1

Вы должны использовать либо then, либо await, но не оба, как показано ниже:

При использовании 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)
    }
}

При использовании await

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

Обратите внимание, что при вызове getB () вам не нужно then или await, поскольку он не асинхронный

Answer 2

В отличие от того, что сказал @thanthu, вы можете использовать и тогда, и ждать.В своем первом посте вы пропустили только добавление return в методе getA:

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

Answer 3

попробуйте

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