手写一个async/await的实现

众所周知,async/await只是一个语法糖,它是基于生成器来实现的,我根据网上的资料,从头开始写出它中间的原理实现。

生成器

生成器是在定义函数时在function后添加*定义的,像这样:function* func(){},执行生成器函数后会得到一个迭代器,在生成器函数中能支持yield来暂停函数,直到迭代器调用next方法.同时next能传入一个参数来作为yield的值。

这里先定义两个异步函数来作为以后的实验对象:

function afunc() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("afunc");
        }, 1000);
    });
}
function bfunc() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("bfunc");
        }, 2000);
    });
}

第一版

首先分别定义两个函数,一个是收集在async函数中需要使用的异步函数,一个是async函数主体在这里运行异步的函数。

function collector(...fn) {
    return function () {
        for (const item of fn) {
            item().then((fulfilled) => it.next(fulfilled));
        }
    };
}
function* async(...fn) {
    let inner = collector(...fn);
    console.log("aaa");
    console.log(yield inner());
    console.log("bbb");
    console.log(yield inner());
}
let it = async(afunc, bfunc);
it.next();

// 运行结果: aaa afunc bbb bfunc

可以看到,已经可以让同步方法在两个异步函数中间了,但是这个方案有个问题,本来这个函数期待是三秒打印完,这里只花了两秒,原因在于在collector中同步进行了数组遍历,所以需要把。

第二版

既然原因是同步执行了收集到的函数,那我直接写在函数体里不就行了?这样就可以得到这个并不好用的第二版:

function* generator() {
    console.log("aaa");
    let result = yield afunc().then((fulfilled) => {
        it.next(fulfilled);
    });
    console.log(result);
    let other = yield bfunc().then((fulfilled) => {
        it.next(fulfilled);
    });
    console.log(other);
}
it = generator();
it.next();

// 运行结果: aaa afunc bbb bfunc

不过既然已经得到了想要的结果,这里只需要把它包装一下就可以了

第三版

这一版就相当接近async/await的写法了,通过在生成器函数中定义函数执行顺序,在每次执行异步函数时跳出,等到异步函数执行完成后再进行下一步。

function* generator() {
    let result = yield afunc();
    console.log(result);
    let other = yield bfunc();
    console.log(other);
}
myAwait(generator);

function myAwait(genner, ...args) {
    let iter = genner(...args); //得到生成器的迭代器
    return new Promise((resolve, reject) => {
        let result; //iter每次暂停时的结果
        //! inner就是在手动迭代iter
        let inner = function (yield) {
            result = iter.next(yield); //开始迭代 将这里的yield当作yield传入生成器
            if (result.done) {
                //迭代结束:
                resolve(result.value); //Promise结束
            } else {
                //如果没有结束 等到promise的结束继续递归
                return Promise.resolve(result.value).then((fulfilled) => {
                    inner(fulfilled);
                });
            }
        };
        inner(); //迭代器第一次不应该传入参数
    });
}

只要再加上一些错误处理,这样一个手写async/await就完成了。

上一篇:学习python的心酸历程----元组


下一篇:线程礼让_yield