手写async await

async,await其实是基于generator和promise来实现的,具体这两个东西的原理就不展开来讲了, 可以参照阮一峰的文章来理解, 首先上一个简单的例子 

let p1 = new Promise((resolve) => { setTimeout(() => { resolve('b') }, 1000) })

function *a(){             
	let res = yield p1   //拿到一个pending的promise    
        console.log(res)
}   

基于这个例子,我们必须要打印的res在p1的状态改变之后再执行才能达到同步链式调用的目的

所以我们需要对generator函数做一层封装

function asyncTest(fn) {    
    let gen = fn()    
    function onFullfilled(value) {        
        let ret = gen.next(value)        
        if (ret.done) {            
           return        
        }         
        Promise.resolve(ret.value).then(onfullfilled) //这里对返回值进行Promise.resovle是
                                                       //为了防止返回的值不是promise 
     }
    onfullfilled()
}

以上代码精简了一些判断处理,

可以看出我们对每段yield之前的代码(gen.next)都做了一层封装,

只有**当gen.next()跑完得到promise,**才会对返回值进行promise.then,这里可以试想,如果

函数yield前面的函数执行被卡死了,那么后面也不会继续gen.next了,这样才能达到我们顺序打印的目的

function *main(){

     let aPromise = a()

     let res = yield aPromise   //a函数被其他函数调用了,形成了一个递归的关系

     console.log(res)

}
main = asyncTest(main)
main()

这时候的例子就长得很像我们工作中的例子了

流程分析:asyncTest包装的函数必须返回一个promise,跟async函数保持一致,如果a没执行完,后面的console.log(res)也不会执行,所以第一次对main的gen.next()的时候,进入a函数,如果a函数里面卡住,那么后面会等待,这是generator函数的特性,这里a函数的promise**构造函数只有执行完毕, 才会返回p1,**继续往下跑,a也就结束了,返回aPromise,回到上一层main的gen.value.then,这时候还没有执行then里面的回调函数,然后只有当aPromise的状态改变了,才会执行then里的回调函数也就是让main函数继续往下跑,所以流程为

main的第一段->a的第一段->a的第二段->main的第二段->结束

完整代码:

function asyncTest(fn) {
    //这里相当于与给参数的generator函数套了一层
    return function () {
        return new Promise((resolve, reject) => {
            let gen = fn()
            function next(ret) {
                if (ret.done) {
                    return resolve(ret.value)

                }
                return Promise.resolve(ret.value).then(onFullFilled, err => {
                    reject(err)
                })
            }
            function onFullFilled(value) {
                let ret
                try {
                    ret = gen.next(value)
                } catch (e) {
                    return reject(e)
                }
                next(ret)
            }
            onFullFilled()
        })
    }
}