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

Question

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

javascriptvue.jsvuejs2async-awaitvue-component

3

我有一个相当简单的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()执行完毕？请注意，这只是一个简化的示例，因为我想了解它的工作原理，而不仅仅是日志的顺序。

- Libra

有没有什么理由不将 gettreeview 设为异步，这样你就可以直接等待它了？ - 2e0byo

2

这不是Vue的问题，这是异步代码的工作原理。您的函数getTreeView正在处理promises，它会立即执行，但它产生的副作用将在promise解决时发生。 - Robert

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nikola Pavicevic · Accepted Answer

也尝试同时等待方法：

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