欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

es7 async await语法糖

程序员文章站 2022-04-30 09:09:28
...

async:

async 声明一个函数为异步处理函数,它的返回值总是为Promise对象。在函数内return x,会以Promise.resolve(x)的方式呈现。

示例:

async function asyncFn (str) {
    return str
}
let asyncRet = asyncFn('I am a Async Function.')
asyncRet.then(str => {console.log(str)})
console.log('虽然我在最后面,但我显示在前面')

控制台输出:

虽然我在最后面,但我显示在前面
I am a Async Function.

await:

MDN的介绍

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用.

两点要求:
1、只能在async function内部使用
2、await操作会停止代码执行,等待Promise对象的resolvereject函数执行并且得到返回值之后,继续函数代码的执行。

示例:

async function asyncFn () {
    console.log('now wait one second')
    let awaitRet1 = await new Promise((resolve) => {
        setTimeout(() => {
            resolve('await...')
        }, 1000)
    })
    console.log('you can see the return value now')
    console.log(awaitRet1)
}
asyncFn()

控制台输出:

now wait one second
// 等待一秒钟后输出
you can see the return value now
await... 

总结:
async是异步函数的标记,总是结合await关键字使用,在async函数中使用await关键词配合Promise能等暂停代码执行,等待获取resolvereject返回值之后恢复执行

示例:

async function asyncFn () {
    console.log('start')
    console.log('执行到这里,asyncFn函数暂停执行,等待取得返回值后执行。而全局环境的代码继续执行输出')
    let promise1 = await new Promise(function(resolve){
        setTimeout(function(){
            resolve('data1')
        }, 1000)
    })
    console.log(promise1)
    let promise2 =  await new Promise((resolve) => {
        setTimeout(function () {
            resolve("data2")
        }, 1000)
    }, 1000)
    console.log(promise2)
    return 'over'
}
let ret = asyncFn()     
ret.then(data=>console.log(data))
console.log('我在最后面')

控制台输出:

start
执行到这里,asyncFn函数暂停执行,等待取得返回值后执行。而全局环境的代码继续执行输出
我在最后面
// 等待一秒后执行
data1
// 等待一秒后执行
data2
over