Async / Await method in Vue.js

Question

I have this rather simple Vue component (stripped of unnecessary parts):

Vue.component('equipment-tree', {
    data(){
        return {
            tree: [],
    }
},
template: `
    <template>
        <div id="equipment_tree"></div>
    </template>`,
mounted: function(){
    this.getTreeView()
    console.log('4. TREE LOADED AND VISIBLE');;
},
methods: {
    setUpTree(){
        $("#equipment_tree").jstree("destroy");
        $('#equipment_tree').jstree({ 
            core : {
                data : this.tree,
                multiple: false,
                themes: { 
                    dots: true
                }
            },
        });
        console.log("2. TREE SET UP")
    },
    getTreeView(){
        fetch("myurl /*just a URL */", 
            {
                method: 'GET',
            })
            .then((response) => response.json())
            .then((data) => {
                console.log('1. GOT DATA');
                this.tree = JSON.parse(data.tree);
                this.setUpTree();
                console.log('3. SET UP COMPLETE');
            })
        }
    }
})

On mount, I call the method getTreeView() that gets the data from the database, saves it in the variable tree, and then calls setUpTree() which creates a tree using the jstree library. When I run it in the log I see

4. TREE LOADED AND VISIBLE
1. GOT DATA
2. TREE SET UP
3. SET UP COMPLETE

that is, the flow continues after the call to getTreeView(). Now, what if I want to wait until getTreeView() finishes so that the log 4. TREE LOADED AND VISIBLE gets actually printed last?

I tried with async/await as follows: I changed

mounted: function(){
        this.getTreeView()
        console.log('4. TREE LOADED AND VISIBLE');;
    }

into

mounted: async function(){
        await Promise.resolve(this.getTreeView());
        console.log('4. TREE LOADED AND VISIBLE');
    }

but I got the same result as before. Same if following the answers to this question. How can I wait for the method getTreeView() to finish?

Please, note that this is a reduced example because I want to understand how it works, not just because the order of log matters.

Is there any reason not to make gettreeview asynchronous so you can await it directly? — 2e0byo
– 2e0byo, Commented Sep 26, 2021 at 21:54
This is not a vue thing this is how async code works. Your function getTreeView is dealing with promises, it executes right away but the side effects it results in happen when the promise is resolved. — Robert
– Robert, Commented Sep 26, 2021 at 22:15

Nikola Pavicevic · Accepted Answer · 2021-09-26 22:00:54Z

5

Try to wait for method too:

async getTreeView(){
    await fetch("myurl /*just a URL */", 
        {
            method: 'GET',
        })
        .then((response) => response.json())
        .then((data) => {
            console.log('1. GOT DATA');
            this.tree = JSON.parse(data.tree);
            this.setUpTree();
            console.log('3. SET UP COMPLETE');
        })
    }
}

in mounted hook:

async mounted(){
    await this.getTreeView();
    console.log('4. TREE LOADED AND VISIBLE');
}

edited Sep 26, 2021 at 22:00

answered Sep 26, 2021 at 21:55

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

2 Comments

Libra Over a year ago

Now this works! But I don't get it at first: why the "double await"? Why the await on getTreeView() in mounted is not enough? Thanks

Nikola Pavicevic Over a year ago

Because you need to wait till method resolve, so other lines want execute till then

Collectives™ on Stack Overflow

Async / Await method in Vue.js

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related