ES6和Vue 常用问题总结

ES6

用 async/await 来处理异步和Promise

async

先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数

export default {
        name: 'home',
        components: {},
        data() {
            return {}
        },
        methods: {
            async test3() {
                return "33";
            }
        },
        mounted() {
            console.info(this.test3())
            this.test3().then(result=>{
                console.info(`我輸出了${result}`)
            });
            console.info("我在你後面")
        }
    }

控制台打印

async 函数返回的是一个promise 对象，如果async 函数中有返回一个值 ,当调用该函数时，内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回，但如果timeout 函数内部抛出错误呢？ 那么就会调用Promise.reject() 返回一个promise 对象

Promise

看完async的实现是不是和Promise很相似，如何用Promise实现，如下图所示

控制台输出结果

await

现在写一个函数，让它返回promise 对象，该函数的作用是5s 之后在执行下边的函数
下边延时test5implPromise是可以的，test5implAsync没有获取正确值，可能因为没有拿到定时器的返回值

控制台输出结果

现在我们看看代码的执行过程，调用test5函数，它里面遇到了await, await 表示等一下，代码就暂停到这里，不再向下执行了，它等什么呢？等后面的promise对象执行完毕，然后拿到promise resolve 的值并进行返回，返回值拿到之后，它继续向下执行

axios函数利用async/await

第一种是将test和test1函数变成了Promise，所以同步的是test和test1函数，不是同步的axios函数

控制台输出结果