异步处理的终极方案(Promise+Async+Await)

案例:
现在有两个定时器：
定时器A是用来获取随机整数的，最大值为数组arr的长度减一。
定时器B是需要根据定时器A得出的随机数来得到数组arr中的人名，并提示“获取结束”。

限制：
定时器A的时间是1000ms，定时器B可以不要时间。
数组 arr = ["刘备", "关羽", "张飞", "赵云", "黄忠", "曹操", "貂蝉", "吕布"]

如果按照以下代码执行，是无法获取到对应的数组项的：

<template>
    <div>
        <h1>{{heroName}}</h1>
    </div>
</template>
<script>
export default {
    data () {
        return {
            // 英雄名称数组
            arr: ["刘备", "关羽", "张飞", "赵云", "黄忠", "曹操", "貂蝉", "吕布"],
            // 英雄名称
            heroName: "英雄名称"
        }
    },
    created(){
        // 设定一个值（不要等于数字）来作为数组项的索引
        var num = "";
        // 定时器A
        setTimeout(()=>{
            num = parseInt( Math.random()*this.arr.length );
        },1000)
        // 定时器B
        setTimeout(()=>{
            this.heroName = this.arr[num];
            this.$toast.success("获取结束");
        })
    }
}
</script>

我们可以进行以下修改：

<script>
export default {
    ...,
    async created(){
        let num = await this.randomFn();
        setTimeout(()=>{
            this.heroName = this.arr[num];
            this.$toast.success("获取结束");
        })
    },
    methods: {
        // 获取基于数组arr的随机数
        randomFn(){
            return new Promise((resolve, reject)=>{
                setTimeout(()=>{
                    var num = parseInt( Math.random()*this.arr.length );
                    resolve(num);
                },1000)
            })
        }
    }
}
</script>