JavaScript上传文件，不打断点就上传失败

今天在用vue写前端代码时遇到了一个令人很摸不着头脑的问题。一段上传文件并读取文件内容的程序，在程序内打断点后就能成功读取上传的文件的内容，不打断点就没法读到内容。代码如下：

new Vue({
    el: "#training",
    data: {
        result: "这是文件路径",
    },
    methods: {
        uploadfile_: function () {
            var _file = document.getElementById('inputGroupFile04');
            var file = _file.files[0];
            var reader = new FileReader();
            reader.readAsText(file,'utf-8');        //读取文件内容
            this.result = reader.result;           //将文件内容赋值给result 变量
        }

    }
});

经过很长时间的调试，我始终没找到程序的问题在哪，感觉逻辑应该没有问题。之后我查找了网上的几篇博客，终于找到了原因。这是因为js上传文件的程序在执行过程中有多个线程参与，读取文件内容和赋值可能由不同的线程执行。所以上面，如果给result变量赋值的操作在reader读完文件之前执行，那么上述程序执行完之后result变量的值就为空。
如果在reader.readAsText(file,'utf-8');这行代码这里打了断点，那么就会给reader读文件操作以足够多的时间，result变量就能获取到文件内容了。
找到了原因，那么就可以寻找解决办法了，我最开始的想法是在reader.readAsText(file,'utf-8');和this.result = reader.result;两行代码之间加一个sleep时间停顿的方法，结果没有用。之后我又想到把sleep方法换成alert("上传成功");文件读完后整个程序会停一下，问题解决。

new Vue({
    el: "#training",
    data: {
        result: "这是文件路径",
    },
    methods: {
        uploadfile_: function () {
            var _file = document.getElementById('inputGroupFile04');
            var file = _file.files[0];
            var reader = new FileReader();
            reader.readAsText(file,'utf-8');        //读取文件内容
            alert("上传成功");
            this.result = reader.result;           //将文件内容赋值给result 变量
        }

    }
});