Vue中的async和await

async和await作为异步函数，语法很简单，就是在函数前面加上async 关键字，来表示它是异步的。await 表示等一下，代码就暂停到这里，不再向下执行了。

那么异步函数到底意味着什么呢？异步函数意味着该函数的执行不会阻塞后面代码的执行

那怎么调用呢？async 函数也是函数，平时我们怎么使用函数就怎么使用它，直接加括号调用就可以了，为了表示它没有阻塞它后面代码的执行，我们在async 函数调用之后加一句console.log;
代码如下

async function timeout() {
    return 'hello world'
}
timeout();
console.log('虽然我在最下边，但是我是先执行的');

async 函数 timeout 调用了，但是没有任何输出，它不是应该返回 'hello world’吗？ 回到页面上 我们看到的是一个promise对象，如果要获取到promise 返回值，我们应该用then 方法

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('虽然我在最下边，但是我是先执行的');

我们获取到了"hello world’, 同时timeout 的执行也没有阻塞后面代码的执行

接下来我们看await，await是等待的意思，那么它等待什么呢，它后面跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式。注意await 关键字只能放到async 函数里面，那么我们现在写一个函数 让它返回promise对象，函数的作用是5s 之后让数值乘以2

function double(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 5000);
    } )
}

现在再写一个async 函数，从而可以使用await 关键字，await 后面放置的就是返回promise对象的一个表达式，所以它后面可以写上double函数的调用

async function testResult() {
    let result = await double(40);
    console.log(result);
}

我们返回到页面上，看到打印的东西发现，5秒后输出了80。那么我们了解一下代码的执行过程，调用testResult函数，但是它遇到了await，await叫它等一下，等promise对象执行完，再拿到promise resolve的值进行返回，返回值拿到之后，它继续向下执行，遇到await 之后，代码就暂停执行了， 等待double(40) 执行完，然后返回promise开始进行下一步，5秒后，promise resolve了，返回值为80，这时await才拿到返回值80，然后赋值给result， 暂停结束，代码才开始继续，然后继续console.log的语句

ps:async 和 await 基于 promise 的。 使用 async 的函数将会始终返回一个 promise 对象，在使用 await 的时候我们暂停了函数，而不是整段代码，async 和 await 是非阻塞的，你仍然可以使用 Promise。