从生成器到async/await

回顾

所谓的异步，就是程序的一部分如今进行，而另外一部分则在未来运行。异步处理的重点就是如何处理未来运行的那一部分。

回调是 JavaScript 中最基本的异步模式，就是事先约定好未来要作的事而后回头调用。简单直接，但也存在不信任、调用嵌套过深等问题。对于编写代码、维护代码的咱们而言，人类的大脑仍是习惯于线性的处理方式。

基于回调的异步模式所存在的问题促使着咱们寻求一种机制来保证回调的可信任，同时能更好的表达异步。这时候 Promise 出现了，Promise 的出现，并不是要取代回调。而是把回调转交给了一个位于咱们和其它工具之间的可信任的中介机制。Promise 链也提供（尽管并不完美）以顺序的方式表达异步流的一个更好的方法，这有助于咱们的大脑更好地计划和维护异步 JavaScript 代码。

生成器

Promise 虽然有序、可靠地管理回调，可是咱们仍是但愿如同步般表达异步。

咱们已经知道生成器是做为生产迭代器的工厂函数，同时咱们还要知道生成器也是一个消息传递系统。

为何是生成器

在生成器出现以前，程序代码一旦执行，就没有停下来的时候，直到程序结束🔚。然而在生成器里代码是能够暂停的，并且还能够和生成器以外通讯☎️，通讯结束后又能够恢复执行。回想一下以前的异步流程控制，咱们一直在千方百计使得异步任务可以同步表达。如今，咱们能够借助生成器来实现这一想法💡。

了解了生成器的特性以后，咱们就应该知道，当生成器在执行一个异步任务时，彻底能够把异步任务放在生成器外部执行，待异步任务执行结束后再返回🔙生成器恢复执行。要知道，生成器暂停的只是内部的状态，程序的其他部分仍是正常运行的。这样的话，生成器内部的全部代码看起来都是同步表达了。

同时咱们也要注意到，生成器不过是一种新🆕的表达方式，和异步仍是同步没有半毛钱💰关系。既然没有关系，那在异步模式选择上就更无所谓了。考虑到异步系列文章是渐进式的，因此咱们就用 Promise + 生成器 模式来表达异步。

生成器与Promise的结合

在异步流程控制方面，生成器是由两部分组成的。一部分是生成器内部代码以同步的方式表达任务，另外一部分是由生成器生成的迭代器处理异步。

const async = n => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(`第${n}个异步任务`);
        }, 0);
    })
};

const generator = function *generator(){
    const response_1 = yield async(1);
    const response_2 = yield async(2);
    const response_3 = yield async(3);
    console.log('response_1: %s;response_2: %s;response_3: %s;',response_1,response_2,response_3);
};

const gen = generator();
const gen_1 = generator();
console.log('gen_next_1: %s; gen_next_2: %s; gen_next_3: %s;', gen_1.next().value, gen_1.next().value, gen_1.next().value);
gen.next().value.then(yield_1 => {
    console.log('yield_1: %s;', yield_1);
    return gen.next(yield_1).value.then(yield_2 => {
        console.log('yield_2: %s;', yield_2);
        return gen.next(yield_2).value.then(yield_3 => {
            console.log('yield_3: %s', yield_3);
            return gen.next(yield_3);
        })
    })
});

// gen_next_1: [object Promise]; gen_next_2: [object Promise]; gen_next_3: [object Promise];
// yield_1: 第1个异步任务;
// yield_2: 第2个异步任务;
// yield_3: 第3个异步任务
// response_1: 第1个异步任务;response_2: 第2个异步任务;response_3: 第3个异步任务;

若是只看 generator 函数这块，函数内部的写法和同步无异。gen 和 gen_1 都是同一辈子成器的实例。

如前文所述，理解这块代码仍是要从两方面入手 ———— 迭代和消息传递。迭代属性在此再也不赘述，如今重点是消息传递的属性。在生成器中，生成器函数被调用后并未当即执行，而是构造了一个迭代器。而生成器正是靠着 yield/next 来完成生成器内外部的双向通讯。

在生成器内部，yield 是用来暂停（彻底保持其状态）和向外部传递数据的关键字/表达式（初始时函数也是处于未执行状态）。在生成器外部，next 具备恢复生成器和向生成器内部传递数据的能力。

混沌初始（gen 造出来了），盘古开天辟地（第一个 next() 执行），天地初成，继女娲造人后，一切欣欣向荣。共工和祝融两个调皮蛋撞坏了不周山，给女娲出了一个难题（yield），华夏史驻此不前。女娲向上天求助（yield async(1)），上天回应了并送来了五彩石（yield_1）,女娲顺利补天，华夏史再次启程（next(yield_1)）。

然而好景不长，华夏部落常常受到蚩尤部落骚扰侵犯，蚩尤的存在再次阻碍了华夏史的前行（yield）。黄帝无奈向其师求助（yield async(2)），九天玄女授其兵法（yield_2）,黄帝顺利杀蚩尤，华夏史再次启程（next(yield_2)）。

然而好景不长，中原地带洪水泛滥，华夏史再次受阻（yield）。夏禹无奈向太上老君求助（yield async(3)）,太上老君赠其神铁（yield_3）,夏禹顺利治水，华夏史再次启程（next (yield_3)）。

实在编不下去了，还好结束了。😓 代码运行过程大抵如此。生成器内部生成一个数据，而后抛给迭代器消费，迭代器又把执行结果甩给了生成器。就是这么简单，别想的太复杂就行。

所谓的消息双向传递，指的不只仅是正常状况下生成器内外部的数据。对于异常错误，生成器内外部也能够双向捕捉。由于生成器内部的暂停，是保留了其上下文的，因此 try...catch 又能够一展身手了。

生成器自执行 & async/await

Promise + 生成器 来表达异步算是实现了，然而咱们也应该注意到在用迭代器控制生成器的那部分太过繁琐。
若是可以封装下就行了， 以下：

const generator_wrap = function (generator) {
    const args = [...arguments].slice(1);
    const gen = generator.apply(this, args);
    return new Promise((resolve, reject) => {
        const handleNext = function handleNext(yield){
            let next;
            try {
                next = gen.next(yield);
            } catch (error) {
                reject(error);
            }
            if (next.done) {
                resolve(next.value);
            } else {
                return Promise.resolve(next.value).then(yield => {
                    handleNext(yield);
                }, error => {
                    gen.throw(error);
                })
            }
        };
        handleNext();
    })
};
// ———————————— 手动分割线 ————————————
const generator = function *generator(){
    const response_1 = yield async(1);
    const response_2 = yield async(2);
    const response_3 = yield async(3);
    console.log('response_1: %s;response_2: %s;response_3: %s;',response_1,response_2,response_3);
};

generator_wrap(generator);
// response_1: 第1个异步任务;response_2: 第2个异步任务;response_3: 第3个异步任务;

不看 generator_wrap 函数，只看分割线如下的部分。至此，异步流程的表达愈来愈接近理想中的模样了。但 generator_wrap 函数仍是须要本身手动封装，不过如今不用啦😄

ES2017 推出了 async/await ，咱们不用再本身去管理生成器，简单、强大、方便的 async/await 为咱们处理了一切。

const awati_async = async () => {
    const response_1 = await async(1);
    const response_2 = await async(2);
    const response_3 = await async(3);
    console.log('response_1: %s;response_2: %s;response_3: %s;', response_1, response_2, response_3);
};

awati_async();
// response_1: 第1个异步任务;response_2: 第2个异步任务;response_3: 第3个异步任务;

至此，关于 JavaScript 的异步表达暂时告一段落了👋。

异步的 JavaScript 系列：

异步的JavaScript(回调篇)

异步的JavaScript(Promise篇)

异步的JavaScript（终篇） 附（从迭代器模式到迭代协议）

参考资料：

迭代器和生成器

你不知道的 JavaScript （中卷）

你不知道的 JavaScript （下卷）

Generator 函数的异步应用