最先前

我们从来没有住手过对javascript言语异步挪用体式格局的革新，我们一直都想用像java那样同步的体式格局去写异步，只管Promise能够让我们将异步回调添加到then要领中，然则这类挪用体式格局依然不那末文雅，es6 中新增加了generator，我们能够经由过程他的特征来完成异步使命越发文雅的誊写体式格局。

协程引见

协程实在和线程，历程是没有关系的，它不是操纵系统为我们供应的api接口，而是经由过程编程言语或许汇编言语对递次上下文、递次栈来操纵完成的。一个线程内里能够包括多个协程，线程的调理是由操纵体统来决议的，协程的调理是由用户来决议的。操纵系统对其一窍不通，由于能够由用户来调理，所以用来实行合作式的使命迥殊轻易。（注重这里是轻易，由于能经由过程协程处置惩罚的题目，经由过程线程和历程也能够处置惩罚，然则庞杂）

Generator引见

Generator 是协程在es6中的完成。它在es6中是一个函数，这个函数能够分阶段实行，也就是说我们能够在这个函数中的某个位置挑选交出当前线程的实行权限，也能够在当前函数表面的某个位置挑选将权限再交回这个函数，让它继承实行，这类调理完全由用户决议。在es6中协程函数是如许的

function* gen(p) {
    var a = yield p + 1;  //1
    var b = yield p + 2;  //2
    return b;  //3
}

var g = gen(1);
g.next();  //{value: 2, done: false}
g.next();  //{value: 3, done: false}
g.next();  //{value: undefined, done: true}

经由过程 var g = gen(1); 仅仅是创建了一个迭代器，函数 gen 内里的内容并没有实行函数体的实行时由第一个 g.next(); 最先的 而且将 yield 所在那那条语句实行完后就会返回效果。然背面的语句并没有实行。返回值是一个对象，它的第一个属性是 yield 背面表达式的值 (p+1或许p+2的值);第二个属性示意Generator函数是不是实行完成。这里我们经由过程 yield 实行权限交出去，经由过程 next 将权限返回。

function* gen(p) {
    var a = yield p + 1;  //1
    var b = yield a + 1;  //2 注重这里是用到了 a
    return b;
}
var g = gen(1);
g.next();  //{value: 2, done: false}
g.next();  //{value: NaN, done: false} 这里的值是 NaN
g.next();  //{value: undefined, done: true}

g.next();  //{value: 2, done: false}
g.next(2);  //{value: 3, done: false}
g.next(6);  //{value: 6, done: true}

注重这里 //1 处 //2 处 var a = yield p + 1;这条赋值语句中 a 的值并非 p + 1的值。这条语句只是一种写法，这里 a 的值是我们在第二个 next 中传入的 2 这个很主要 b 的值也是我们在第三个 next 中传入的 6

Generator 的主要特征

由上面的内容我们总结 3 个关于 Generator 的主要特征

1 经由过程 yield 交出实行权限，经由过程 next 返回实行权限
2 挪用 next 会获得一个返回值，这个值内里包括了 yield 背面的表达式的实行效果
3 我们能够经由过程给 next 通报参数，而且能够在 Generator 函数中经由过程上面所写的特别体式格局来援用

应用 Generator 的特征来完成异步代码的同步誊写

我们来模仿一个异步函数

function post(url, callback) {
    setTimeout(function() {
        var data = { //模仿异步处置惩罚效果
            url:url,
            value:10
        };
        callback(data);
    }, 1000);
}

post('http://_ivenj',function(data){
    console.log(data.url);  // http://_ivenj
    console.log(data.value);  //10
});

对应上面的这个异步函数我想经由过程 Generator 来如许用

function* gen(url) {
    var data = yield post(url);  //1
    console.log(data.url);
    console.log(data.value);
}
var g = gen('http://_ivenj');
var resultG = g.next();
g.next(resultG.value);

是的，如许写美丽多了，很像 java 的同步写法。差别之处就是多了个 yield 和 * ，这个无伤大雅。固然以上如许用一定是不可的。由于 post 毕竟是个异步要领。没有返回值.假如不能完成如许的写法我这半天就是在扯淡，所以经由过程包装是能够完成的。

经由过程以下两点能够完成以上的誊写体式格局

(1)我有一篇文章 react 实践之 redux applyMiddleware要领详解 中引见了柯里化（Currying）这篇文章虽然是写react的然则柯里化是自力的，这里就要应用柯里化的头脑

(2)我们要在回调中挪用 next 来继承实行，(这里有人会想不是不用回调了么，怎样还用，请继承看。。。)

我们要对 post 的挪用情势举行包装

function kPost(url) {
    return function(callback) {
        post(url, callback);
    }
}

经由过程这个包装，我们就可以保证挪用 kPost 就会同步的获得一个返回值

function* gen(url) {
    var data = yield kPost(url);  //1
    console.log(data.url);
    console.log(data.value);
}
//这里实行体式格局会差别
var g = gen('http://_ivenj');
//启动使命
var resultG1 = g.next();
var value_resultG1 = resultG1.value; //resultG1.value 一定是一个函数，由于我们包装了
value_resultG1(function(data){
    g.next(data);  //经由过程在异步的回调中挪用 next 并通报值来确保依靠异步效果的代码能准确实行
});

下面就是团体代码，是上面的片断组合，请你粘贴到浏览器控制台，或许用node运转，就会看到想要的效果

function post(url, callback) {
    setTimeout(function() {
        var data = { //模仿异步处置惩罚效果
            url:url,
            value:10
        };
        callback(data);
    }, 1000);
}
function kPost(url) {
    return function(callback) {
        post(url, callback);
    }
}
function* gen(url) {
    var data = yield kPost(url);  //1
    console.log(data.url);
    console.log(data.value);
}
//这里实行体式格局会差别
var g = gen('http://_ivenj');
//启动使命
var resultG1 = g.next();
var value_resultG1 = resultG1.value; //resultG1.value 一定是一个函数，由于我们包装了
value_resultG1(function(data){
    g.next(data);
});

有人会说，怎样不就是将异步回调转移出来了么，还要写回调。这说明你还没有真正体味其中之玄妙。我们会发明 我们写的异步

value_resultG1(function(data){
    g.next(data);
});

仅仅是挪用了 next 举行了效果的通报，这内里有配合之处，不管是哪种异步，我们都只通报值。人人的处置惩罚都是一样的。真正的营业逻辑确实是用同步的体式格局写的。那末，我们能够将配合的处所提取出来，写一个通用的函数去实行这个传值操纵，如许，我们完全就告别了异步，再也看不到了，好开心。co.js就是一个这类generator的实行库。运用它是我们只需要将我们的 gen 通报给它像如许 co(gen) 是的就如许。下面我们本身写一个 co

Generator实行器

function co(taskDef) {
    //猎取迭代器  相似 java 中的外柄迭代子
    var task = taskDef();
    //最先使命
    var result = task.next();
    //挪用next的递归函数
    function step() {
        if (!result.done) {  //假如generator没有实行完
            if (typeof result.value === "function") {
                result.value(function(err, data) {
                    if (err) {
                        result = task.throw(err);
                        return;
                    }
                    result = task.next(data);  //向后通报当前异步处置惩罚效果
                    step();  //递归实行
                });
            } else {
                result = task.next(result.value);  //假如实行完了就通报值
                step();  //递归实行
            }

        }
    }
    // 启动递归函数
    step();
}

经由过程 co 实行的完全代码

function post(url, callback) {
    setTimeout(function() {
        var data = { //模仿异步处置惩罚效果
            url:url,
            value:10
        };
        callback(data);
    }, 1000);
}
function kPost(url) {
    return function(callback) {
        post(url, callback);
    }
}
function gen(url) {
    return function* () {
        var data = yield kPost(url);  //1
        console.log(data.url);
        console.log(data.value);
    }
}
function co(taskDef) {
    var task = taskDef();
    //最先使命
    var result = task.next();
    // 挪用next的递归函数
    function step() {
        if (!result.done) {  //假如generator没有实行完
            if (typeof result.value === "function") {
                result.value(function(err, data) {
                    if (err) {
                        result = task.throw(err);
                        return;
                    }
                    result = task.next(data);  //向后通报当前异步处置惩罚效果
                    step();  //递归实行
                });
            } else {
                result = task.next(result.value);  //假如实行完了就通报值
                step();  //递归实行
            }

        }
    }
    // 启动递归函数
    step();
}
    
co(gen('http://_ivenj')); //挪用体式格局就是这么简朴

以上代码实行 1s 后会抛出一个非常，而且准确打印{url: “http://_ivenj”, value: 10}，智慧的你一定晓得为何会抛出非常!!!

到这里已说邃晓了，而且也说完了，你会想是不是是把异步包装成Promise也能够呢，答案是一定的，柯里化的头脑只是一种完成体式格局，Promise 也是一种，你能够本身去揣摩，co.js 就是将两种体式格局都完成了的一个实行器。es7 中从言语层面临 Generator 举行了包装，在es7 中我们能够运用 async和await更文雅的完成相似java的递次誊写体式格局，async和await 是Generator的语法糖，在es7中内置了实行器。他人都说是最终计划。