回忆
所谓的异步，就是递次的一部份如今举行，而另一部份则在未来运转。异步处置惩罚的重点就是怎样处置惩罚未来运转的那一部份。
回调是 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（终篇） 附（从迭代器形式到迭代协定）
参考资料：
