The generator function js

getting Started

　　In simple terms, usage is as follows:

    * the Fn function () { 
        console.log (1); 
        // Pause! 
        the yield; 
        // call to the next method continues 
        the console.log (2); 
    } 
    var ITER = Fn (); 
    iter.next (); //. 1 
    iter.next (); // 2

　　1, is a characteristic function generator having a function name '*'

　　2, a controller generates by calling the function

　　3, calls the next () method to begin function

　　4, encountered yield function will be suspended

　　5, again calling next () function to continue

 

Messaging

　　In addition to pausing and resuming execution, the generator while supporting traditional values.

　　Usage is as follows:

    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

　　It can be seen behind yield a string, when the first call to next, pause here and return to the iter.next ().

　　Suspended place is an assignment, a need for a variable, so the next () method to pass a parameter replaces the yield 2, 2 was a last printed.

 

Asynchronous application 　　

　　To implement asynchronous control flow through yield:

    Fn function (A, B) { 
        // assume that this is a request ajax 
        ajax ( 'URL' + A + B, function (Data) { 
            // the data request to be executed it.next 
            it.next (Data); 
        }) ; 
    } 
    // this is the function generator 
    function G * () { 
        // if the asynchronous operation is completed will yield a value obtained 
        // will automatically continue here 
        var text yield = Fn (A, B); 
        the console.log (text); 
    } 
    var IT = G (); 
    it.next ();

　　Here to do a simplified, ignoring some error handling.

　　Really clever, to continue through the callback function generator, and then get the data.

　　However, to get the data directly in the callback not it. Scripture says, such asynchronous operation in line with the brain thought patterns, execution of the function appears to 'synchronize' the.

 

yield+promise

　　Focus here.

　　promise to achieve asynchronous before the first recall: 

    Request function (URL) { 
        return new new Promise (function (resolve, Reject) { 
            // Ajax asynchronous request to complete the call will resolve resolution 
            Ajax (URL, resolve); 
        }); 
    } 
    . Request ( 'URL') the then (function (RES ) { 
        the console.log (RES); 
    })

　　Process is probably a function of incoming calls url, because the resolution would immediately trigger ajax request function. After asynchronous request invoke callback function, i.e. resolve, and then acquires data according to the method call returns resolve.

　　The yield is now integrated with the promise:

    foo function (X) { 
        return Request ( 'URL' + X); 
    } 
    // wait return value promise resolution 
    function Fn * () { 
        var text the yield foo = (. 1); 
    } 
    var IT = Fn (); 
    // Returns a promise 
    . it.next var P = () value; 
    // promise for treatment 
    p.then (function (text) { 
        // here continue generator 
        it.next (text); 
    })

 

Package

　　The above can be encapsulated yield + promise, to obtain the following functions:

    RUN function (Gen) { 
        // Get parameter generator itself except 
        var = args [] .slice.call (arguments,. 1), 
            IT; 
        // IT = main () 
        IT = gen.apply (the this, args) ; 
        . Promise.resolve return () the then (handleNext function (value) { 
            // no first start value 
            var Next it.next = (value); 
            return (handleResult function (Next) { 
                // return finished 
                if (next .done) { 
                    return next.value; 
                } the else { 
                    // if there is passed resolution next.value handleNext 
                    return Promise.resolve (next.value) .then (handleNext, function (ERR) {}); 
                } 
            }) ( next);
        }); 
    } 
    // This is a function generator 
    function * main () { 
        // ... 
    }; 
    // will automatically call the asynchronous operation until the end of 
    run (main);

　　If there are two asynchronous operation, two data obtained after the return, and then a third asynchronous operation, you can do this:

    foo function () { 
        var = P1 request ( 'URL1'), 
            P2 = request ( 'URL2'); 
        // every request asynchronous request is completed automatically releasing the yield 
        var = the yield P1 R1, 
            R2 = the yield P2; 
        var R3 the yield Request = ( 'URL3' + R1 + R2); 
        the console.log (R3); 
    }