JavaScript中的async/await的实现原理及手写

本文链接：https://blog.csdn.net/weixin_50789156/article/details/124199482

本文探讨了async函数的本质，将其视为生成器函数，讲解了await关键字如何工作以及在Promise中的应用。通过实例说明了如何使用generatorToAsync函数将生成器转换为异步操作。测试部分展示了将gen函数转换并执行的完整过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理分析：

async函数其实是生成器函数，await相当于yield命令
生成器函数执行迭代器
迭代器每执行next()一次都会生成一个值
next方法里的值可以传值给生成器内部，通过Promise.resolve().then方法把next对象里面的value拿到传给下一个next方法执行

代码实现：

function generatorToAsync(genFn){
    // 返回一个新的函数
    return function (){
        // generator函数也可能传参
        let gen = genFn.apply(this,arguments)
        // 返回一个promise对象
        return new Promise((reslove,reject) => {
            function go(key,arg){
                let res 
                try {
                    // 如果没有出现错误，执行generator函数的next方法
                    res = gen[key](arg)
                } catch (err) {
                    // 出现错误就返回错误reject结果
                    return reject(err)
                }
                // 赋值结构出next方法的value,done
                const {value,done} = res
                // 如果没有下一个就程序执行完毕，返回OK
                if(done) reslove('ok')
                // 没有执行完，递归执行
                else {
                    Promise.resolve(value).then(data => go(key,data))
                }
            }
            // 初始化执行一次
            go('next')
        })
    }
}

测试：

function fn(num) {
    return new Promise((reslove,reject) => {
        setTimeout(() => {
            reslove(num * 2)
        },1000)
    })
}

function *gen(num){
    let num1 = yield fn(num)
    console.log(num1);
    let num2 = yield fn(num1)
    console.log(num2);
}

generatorToAsync(gen)(1).then(console.log)

// output: 2 4 yes