欢迎光临
我的个人博客网站

手写一个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就完成了。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 手写一个async/await的实现
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏