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 对象。 这一点很重要。

Logo

前往低代码交流专区

更多推荐