async的实现分析

本文探讨了async/await作为Generator的语法糖如何简化异步操作。async函数内置执行器,自动执行并返回Promise。对比Generator,它提供了更好的语义,更广泛的适用性,并简化了异步流程控制。通过分析实现,我们可以理解其工作原理。
摘要由CSDN通过智能技术生成

async/await 就是 Generator 的语法糖,使得异步操作变得更加方便。其中Generator的*换成了async关键字, yield换成了await关键字。

Async函数与Generator相比,甜在哪里?

  • async函数内置执行器,函数调用之后会自动执行,输出最后的结果。而Generator需要配合next和co模块一起使用。
  • 更好的语义, async表示函数里有异步操作,而await表示紧跟在后面的表达式需要等待结果。
  • 更广的适用性,co模块约定, yield后面只能是thunk函数或者Promise对象,但是async可以是Promise对象和原始类型的值 。
  • async的返回值是Promise对象,而Generator返回值是iterator。

Async的实现原理,就是将Generator和自动执行函数包装在函数里。

下面是看的博客的分析实现,自己理解分析一下

    function my_co(it) {
        return new Promise( (resolve, reject) => {
            function next(data) {
                try{
                    let {value, done} = it.next(data);

                }catch(err) {
                    reject(err);
                }

                if(!done) {
                    Promise.resolve(value).then( val => next(val), reject);
                }else{
                    resolve(value);
                }
            }
            next();
        });
    }

实际运行一下

    function* test() {
            yield new Promise( (resolve, reject) => {
                setTimeout(resolve(10), 100);
            });

            yield new Promise( (resolve, reject) => {
                resolve(100);
            });

            yield 10;

            return 1000;
        }

    my_co(test()).then(val => console.log(val) ).catch(err => console.log(err)) //output 1000

下面是执行过程分析

    function my_co(it) {
            return new Promise( (resolve, reject) => {
                function next(data) { //第一次调用,data的值为undefined,第二次调用data为promsie[10],第三次掉用为romise[100],第四次调用为10
                    try {
                        var {value, done} = it.next(data); // {value:promise obj, done:false}, data=undefined;{value:promise obj, done:false}, data=10; {value:10, done:false}, data=100;{value:undefined, done:true}, data=10
                    } catch (error) {
                        reject(error);
                    }

                    if(!done) { //true
                        //有可能值时vlaue或者promise对象
                        Promise.resolve(value).then((val) => { //第一次value:promise, 第二次value:promise,第三次为10
                            console.log(value)
                            next(val);
                        }, reject);
                    }else{
                        console.log(value);
                        resolve(value); //第四次调用 value为1000,决议完成(上面的test中若是没有返回值或者返回值为空,则value为undefined)
                    }
                }

                next(); //执行一次
            });
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值