在B站上面学写小程序，里面有一节讲解js的回调函数，Promise， async+await通过例子讲解了三种方法的进化，我觉得讲的非常好，在此记录一下。

普通代码

function ajax(){
    setTimeout(() => {
        console.log('你好')
    }, 1000);
}
ajax()
console.log('执行结束')

执行上面的代码，输出结果

D:\Document\MoocMpvue\koa-demo>node asyncawait.js
执行结束
你好

可以看到先执行下面的代码，打印出“执行结束”,再去执行上面的代码'你好',和我们预期不一样。

callback

function ajax(fn){
    setTimeout(() => {
        console.log('你好')
        fn()
    }, 1000);
}
//callback 会出现回调地狱
ajax(() => {
    console.log('执行结束')
})

输出结果

D:\Document\MoocMpvue\koa-demo>node asyncawait.js
你好
执行结束

通过回调函数可以解决函数执行顺序问题，但是会陷入回调地狱，造成代码层层嵌套，不容易阅读。

Promise

function delay(word){
    return new Promise((reslove, reject)=>{
        setTimeout(() => {
            reslove('hello' + word)
        }, 2000);
    })
}
delay("孙悟空")
    .then((word)=>{
        console.log(word)
        return delay('猪八戒')
    })
    .then((word)=>{
        console.log(word)
        return delay('沙悟净')
    })
    .then((word)=>{
        console.log(word)
    })

执行结果

D:\Document\MoocMpvue\koa-demo>node asyncawait.js
hello孙悟空
hello猪八戒
hello沙悟净

通过Promise消除了回调地狱，但是也会写很多的then，也不是很美观，终极解决方案async + await。

async + await

function delay(word){
    return new Promise((reslove, reject)=>{
        setTimeout(() => {
            reslove('hello' + word)
        }, 2000);
    })
}

async function start(){
    const word1 = await delay('孙悟空')
    console.log(word1)

    const word2 = await delay('猪八戒')
    console.log(word2)

    const word3 = await delay('沙悟净')
    console.log(word3)
}
start()

输出结果

D:\Document\MoocMpvue\koa-demo>node asyncawait.js
hello孙悟空
hello猪八戒
hello沙悟净

通过async + await代码变得整洁，和同步执行代码一样。