es6 generator函数的异步编程

2019-05-22 06:33:59来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

es6 generator函数,我们都知道asycn和await是generator函数的语法糖,那么genertaor怎么样才能实现asycn和await的功能呢?

  1.thunk函数    将函数替换成一个只接受回调函数作为参数的单参数函数

/* Thunk 函数替换的不是表达式,而是多参数函数,将其替换成一个只接受回调函数作为参数的单参数函数。 */
/* 
    注 fn 传入的是一个函数,传入一个函数形成的方法,传入参数,最后传入callback
    在经过两次函数调用后,该函数就换成一个只接受回调函数作为参数的单参数函数
 */
var thunk = function(fn) {
    return function() {
        let args = Array.prototype.slice.call(arguments);
        return function (callback) {
            args.push(callback);
            return fn.apply(this,args)
        }
    }
}

  2.generator异步编程的示例

/* 异步执行方法 */
function timeout(ms,val) {
    return new Promise((res)=>{
        setTimeout(()=>{
            res(val)
        },ms)
    })
}
function *fn(){
    yield timeout(2000,1)
    console.log('222')
    yield timeout(3000,2)
    yield timeout(2000,3)
    return 2;
}

  使用while去让上面的generator函数自执行

/* res.value本身是个异步的promise方法,如果几个promise 有关联那么这样就不行了 */
var f = fn();
var res = f.next();
while(!res.done) {
    res.value.then((val)=>{
        console.log(val)
    })
    res = f.next();
}

  在浏览器可知打印的结果,并不是顺序的,1 3 是同以事件输出的,2是最后输出的

  我们也可以使用promise嵌套使其按顺序输出,但是这种并不好,因为可能不知道具体有几个yield,嵌套的方式写的不好看

var f = fn();
var res = f.next();
res.value.then((val)=>{
    console.log(val)
    return res = f.next().value
}).then((val)=>{
    console.log(val)
    return res = f.next().value
}).then((val)=>{
    console.log(val)
    return res = f.next().value
})

  我们定义一个generator自执行器(注为什么要提thunk函数,timeout已经经过thunk类似的封装了)

/* 写一个适合generator的执行器 */
function *gn(){
    let p1 = yield timeout(2000,1)
    console.log(p1)
    let p2 = yield timeout(3000,2)
    console.log(p2)
    let p3 = yield timeout(2000,3)
    console.log(p3)
    return 2;
}
//  按顺序输出 1 2 3
/* 传入要执行的gen */
/* 其实循环遍历所有的yeild (函数的递归)
    根绝next返回值中的done判断是否执行到最后一个,
    如果是最后一个则跳出去*/
function run(fn) {
    var gen = fn();
    function next(data) {
        /* 执行gen.next 初始data为undefined */
        var result = gen.next(data)
        /* 如果result.done 为true 则代表执行到了gen的return,直接跳出去 */
        if(result.done) {
            return;
        }
        /* result.value 为promise */
        result.value.then(val=>{
            next(val)
        })
    }
    /* 调用上一个next方法 */
    next();
}
run(gn)

上述输出结构,分别是 1 2 3 ,间隔时间 2s 3s 2s

  虽然已经有async和await这样的generator的语法糖了,但是我们还是需了解以下他们的本质。相信您了解了本质,掌握asycn和await更不在话下

  文章参考地址,阮一峰老师的  Generator 函数的异步应用 http://es6.ruanyifeng.com/#docs/generator-async


原文链接:https://www.cnblogs.com/czkolve/p/10902303.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:自定义Vue组件打包、发布到npm以及使用

下一篇:html.css.javascript 跟随着我一起走向前端之路