es7 async await语法糖

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

猜你喜欢

转载自blog.csdn.net/weixin_41855143/article/details/81269839