How to use async/await in Vue.js?

Question

I'm new in ES7

I want to use async/await in Vue.js

Here is my code

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

It returns

1
2
3

But when I use it with axios, then

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

It returns

2
3
1

So I want to add async/await in that code.

How can I use async/await?

I tried

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

It returns same result.

getA doesn't return the promise.

tkausl
– tkausl

2019-03-02 05:11:48 +00:00
Commented Mar 2, 2019 at 5:11 — tkausl
– tkausl, Commented Mar 2, 2019 at 5:11

Ousmane · Accepted Answer · 2021-02-28 13:06:55Z

71

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

edited Feb 28, 2021 at 13:06

Ousmane

2,9303 gold badges35 silver badges37 bronze badges

answered Mar 2, 2019 at 5:26

Thanthu

5,19837 silver badges50 bronze badges

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

1 Comment

Kevin Chandra Over a year ago

since getB is not asynchronous, then what is the use of async for getB ?

Stéphane Damon · Accepted Answer · 2019-08-26 13:21:07Z

16

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

answered Aug 26, 2019 at 13:21

Stéphane Damon

2412 silver badges6 bronze badges

2 Comments

mksm Over a year ago

you can. But should you? one day you will find yourself in the middle of try-catch and .catch(err => {console.log(err)}) blocks, with tons of async-await and .then and .all instructions. It could be the second most difficult challenge for a gentleman. Of course, after an attempt to give birth to a baby. For women - the most difficult one.

genuinefafa Over a year ago

it still feels like the way to go, you are awaiting for a promise that ends when console.log(1) run

Nasser Ali Karimi · Accepted Answer · 2021-10-23 04:43:23Z

9

Vuejs, example with Axios API request. more details between the code

  methods: {
    async getA(data, type) {
      console.log("This is a API calls, that the response time is vary.");

      const result = await this.getSources();
      
      console.log("Do what you want after completing the prev job.");
    },
    getSources() {
      return new Promise(resolve => {

        // Here the point is the resolve that you should resolve('something');.
        this.axios
          .get("/api/sources")
          .then((resp) => {
            this.sources = resp.data;
            resolve('resolved');
          })
          .catch(() => {
            resolve('rejected');
          });
      });
    },
  },

edited Oct 23, 2021 at 4:43

answered May 1, 2021 at 7:57

Nasser Ali Karimi

4,7216 gold badges42 silver badges83 bronze badges

1 Comment

Jonas Mar 14 at 11:19

I think this is the best answer because it includes the vital error handling. My only change would be to use (reject(new Error('error message')); rather than resolve('rejected'); in the catch block.

sathish kumar · Accepted Answer · 2019-03-14 11:38:53Z

7

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

edited Mar 14, 2019 at 11:38

answered Mar 2, 2019 at 5:15

sathish kumar

1,5171 gold badge12 silver badges19 bronze badges

1 Comment

Konstantin Smirnov Over a year ago

adding async to created lifecycle method made it work for me while having a chained promises procedure.

Collectives™ on Stack Overflow

How to use async/await in Vue.js?

4 Answers 4

1 Comment

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related