js中的生成器函数

入门

  简单来说,用法如下:

复制代码
    function* fn() {
        console.log(1);
        //暂停!
        yield;
        //调用next方法继续执行
        console.log(2);
    }
    var iter = fn();
    iter.next(); //1
    iter.next(); //2
复制代码

  1、函数生成器特点是函数名前面有一个‘*’

  2、通过调用函数生成一个控制器

  3、调用next()方法开始执行函数

  4、遇到yield函数将暂停

  5、再次调用next()继续执行函数

消息传递

  除了暂停和继续执行外,生成器同时支持传值。

  用法如下:

复制代码
    function* fn() {
        var a = yield 'hello';
        yield;
        console.log(a);
    }
    var iter = fn();
    var res = iter.next();
    console.log(res.value); //hello
    iter.next(2);
    iter.next(); //2
复制代码

  可以看到,yield后面有一个字符串,在第一次调用next时,暂停在这里且返回给了iter.next()。

  而暂停的地方是一个赋值语句,需要一个变量给a,于是next()方法中传了一个参数2替换了yield,最后打印a得到了2。

异步应用   

  通过yield来实现异步控制流程:

复制代码
    function fn(a, b) {
        //假设这是一个ajax请求
        ajax('url' + a + b, function(data) {
            //数据请求到会执行it.next
            it.next(data);
        });
    }
    //这里是函数生成器
    function* g() {
        //当异步操作完毕yield会得到值
        //这里会自动继续执行
        var text = yield fn(a, b);
        console.log(text);
    }
    var it = g();
    it.next();
复制代码

  这里做了简化处理,忽略了一些错误处理。

  确实很巧妙,通过回调函数来继续执行函数生成器,然后得到数据。

  然而,直接在回调里拿数据不行么。书上讲,这样异步操作符合大脑思考模式,函数的执行看起来‘同步’了。

yield+promise

  重点来了。

  先回忆之前promise对异步的实现: 

复制代码
    function request(url) {
        return new Promise(function(resolve, reject) {
            //ajax异步请求完成会调用resolve决议
            ajax(url, resolve);
        });
    }
    request('url').then(function(res) {
        console.log(res);
    })
复制代码

  流程大概是调用函数传入url,由于会立即决议,触发ajax请求函数。异步请求完调用调用回调函数,也就是resolve,然后根据返回的resolve调用then方法获取数据。

  现在将yield与promise综合在一起:

复制代码
    function foo(x) {
        return request('url' + x);
    }
    //等待promise决议值返回
    function* fn() {
        var text = yield foo(1);
    }
    var it = fn();
    //返回一个promise
    var p = it.next().value;
    //对promise处理
    p.then(function(text) {
        //这里继续执行生成器
        it.next(text);
    })
复制代码

封装

  可以将上面的yield+promise进行封装,得到下面的函数:

复制代码
    function run(gen) {
        //获取除了生成器本身以外的参数
        var args = [].slice.call(arguments, 1),
            it;
        //it = main()
        it = gen.apply(this, args);
        return Promise.resolve().then(function handleNext(value) {
            //第一次启动无value
            var next = it.next(value);
            return (function handleResult(next) {
                //执行完毕返回
                if (next.done) {
                    return next.value;
                } else {
                    //如果还有就决议next.value传给handleNext
                    return Promise.resolve(next.value).then(handleNext, function(err) {});
                }
            })(next);
        });
    }
    //这是一个函数生成器
    function* main() {
        //...
    };
    //该调用会自动异步运行直到结束
    run(main);
复制代码

  如果有两个异步操作,获取到返回的两个数据后,再进行第三个异步操作,可以这么做:

复制代码
    function foo() {
        var p1 = request('url1'),
            p2 = request('url2');
        //每一个request异步请求完成后会自动解除yield
        var r1 = yield p1,
            r2 = yield p2;
        var r3 = yield request('url3' + r1 + r2);
        console.log(r3);
    }
复制代码

猜你喜欢

转载自www.cnblogs.com/ygunoil/p/11243820.html