vue中异步函数async和await的用法

一，异步函数async

1.1，async作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数。就是在函数前面加上async 关键字，来表示它是异步的，那怎么调用呢？async 函数也是函数，平时我们怎么使用函数就怎么使用。为了表示它没有阻塞它后面代码的执行，我们在async 函数调用之后加一句console.log。

async timeout() {
    return 'timeout()方法执行。'
},
test () {
    this.timeout()
    console.log('虽然我在后面，但是我先执行！')
}

执行结果：

1.2，接下来我们看一看timeout()执行返回了什么？ 把上面的 timeout() 语句改为console.log(timeout())。

async timeout() {
    return 'timeout()方法执行。'
},
test () {
    console.log(this.timeout())
    console.log('虽然我在后面，但是我先执行！')
}

执行结果：

1.3， 可以发现原来async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用then 方法， 继续修改代码。

async timeout() {
    return 'timeout()方法执行。'
},
test () {
    this.timeout().then(res => {
        console.log(res)
    })
    console.log('虽然我在后面，但是我先执行！')
}

执行结果：

1.4，我们获取到了"timeout()方法执行。', ，同时timeout 的执行也没有阻塞后面代码的执行，和我们刚才说的一致。此时你可能注意到控制台中的Promise 有一个resolved，这是async 函数内部的实现原理。如果async 函数中有返回值当调用该函数时，内部会调用Promise.resolve() 方法把它转化成一个promise 对象作为返回，但如果timeout 函数内部抛出异常呢？ 那么就会调用Promise.reject() 返回一个promise 对象，继续修改一下timeout 函数。

async timeout(flag) {
    if(flag) {
        return 'timeout()方法执行。'
    } else {
        throw 'timeout()方法执行失败！'
    }
    },
test () {
    console.log(this.timeout(true))
    console.log(this.timeout(false))
    // console.log('虽然我在后面，但是我先执行！')
}

执行结果：

如果函数内部抛出错误，promise 对象有一个catch 方法进行捕获。

async timeout(flag) {
    if(flag) {
        return 'timeout()方法执行。'
    } else {
        throw 'timeout()方法执行失败！'
    }
    },
test () {
    console.log(this.timeout(true))
    this.timeout(false).then(res => {
        console.log(res)
    })
    // console.log('虽然我在后面，但是我先执行！')
}

执行结果：

二，同步函数await

1.1，await是等待的意思，代码执行到 await 表示等一下，代码就暂停到这里，不再向下执行了，它等什么呢？等后面的promise对象执行完毕，然后拿到promise resolve 的值并进行返回，返回值拿到之后，它继续向下执行。。注意await 关键字只能放到async 函数里面，在vue中开启Eslint 会检测到。

calculate (var1) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(1000*var1)
        }, 3000)
      })
    },
async getCalcResult (params) {
    console.log('等待计算结果中...')
    const result = await this.calculate(params)
    console.log('获取计算结果为：' + result)
},
test () {
    this.getCalcResult(10)
}

执行结果：

总结：async 和 await 基于 promise 的。 使用 async 的函数将会始终返回一个 promise 对象。 这一点很重要。