async await 使用代码详解

小白版正确代码

async function fn() {
    function f1() {
        return new Promise((resolve, reject) => {
            setTimeout(function () {
                console.log(11111)
                resolve()
            }, 3000)
        })
    }
    function f2() {
        return new Promise((resolve, reject) => {
            setTimeout(function () {
                console.log(222222)
                resolve()
            }, 2000)
        })

    }
    function f3() {
        return new Promise((resolve, reject) => {
            setTimeout(function () {
                console.log(333333)
                resolve()
            }, 1000)
        })
    }
    await f1();
    await f2();
    await f3();
}
async function ns(){

    await fn()
    console.log(444444)
}
ns()
输出结果：

Promise {}
VM251:5 11111
VM251:13 222222
VM251:22 333333
VM251:34 444444

错误演示1

async function fn() {
function f1() {
setTimeout(function () {
console.log(11111)
}, 3000)
}
function f2() {
setTimeout(function () {
console.log(222222)
}, 2000)

    }
    function f3() {
       
            setTimeout(function () {
                console.log(333333)
            }, 1000)
    }
    await f1();
    await f2();
    await f3();
}
async function ns(){

    await fn()
    console.log(444444)
}
ns()


结果：

VM453:26 444444
Promise {: undefined}
VM453:16 333333
VM453:9 222222
VM453:4 11111

错误演示2

async function fn() {
function f1() {
setTimeout(function () {
console.log(11111)
}, 3000)
}
function f2() {
setTimeout(function () {
console.log(222222)
}, 2000)

    }
    function f3() {
       
            setTimeout(function () {
                console.log(333333)
            }, 1000)
    }
    await f1();
    await f2();
    await f3();
}
async function ns(){

    await fn()
    console.log(444444)
}
ns()


结果：

VM463:26 444444
Promise {: undefined}
VM463:16 333333
VM463:9 222222
VM463:4 11111

原理

await关键字后面跟Promise对象：在Pending状态时，相应的协程会交出控制权，进入等待状态，这是协程的本质；

await是async wait的意思： wait的是resolve(data)的消息，并把数据data返回，然后再顺序执行下面的语句。

来源：CSDN

作者：Ethan__2016

链接：https://blog.csdn.net/Ethan__2016/article/details/103737253