Vue.js 中的异步/等待方法

Question

我有这个相当简单的 Vue 组件（去掉了不必要的部分）：

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

在挂载时，我调用方法 getTreeView() 从数据库中获取数据，将其保存在变量 tree 中，然后调用 setUpTree() 使用jstree 图书馆。当我运行它在日志中时，我看到

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

也就是说，流程在调用 getTreeView() 之后继续。现在，如果我想等到 getTreeView() 完成以便最后打印日志 4. TREE LOADED AND VISIBLE 怎么办？

我尝试使用 async/await 如下：我更改了

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

进入

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

但我得到的结果和以前一样。如果遵循的答案，则相同。如何等待方法 getTreeView() 完成？

请注意，这是一个简化的示例，因为我想了解它是如何工作的，而不仅仅是因为日志的顺序很重要。

Answer 1

尝试等待方法：

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

在挂钩中：

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

Vue.js 中的异步/等待方法

Async / Await method in Vue.js

javascript

async-await

vue.js

vue-component

vuejs2