ES6中的async generator函数很好用，在处理一些列的异步调用管理上很方便。可以方便的处理异步函数，可以用来管理异步的、序列的异步工作流。但是执行的顺序确实有点绕，脑子不太好使，端午节期间花了一天的时间来彻底梳理了一下。

注意，看这篇文章前，最好要先了解generator函数的运行机制和基本的使用。这篇文章不做阐述。

直接撸代码

一、generator函数中，直接使用yield返回

// 模拟一个异步函数
function mockFetch(url, ms){   log(`mockFetch enter :: url = ${url}, ms = ${ms}`); // A1行//return ms;return new Promise((resolve, reject)=>{log(`mockFetch new promise enter :: url = ${url}, ms = ${ms}`); // A2行setTimeout(()=>{// 模拟resove和reject场景if(ms % 2 ===0){resolve(`mockFetch end :: url = ${url}, ms = ${ms}`); // A3行}else{reject(new Error("mockFetch :: error, not support!!")) // A4行}},ms || 600);})
}// 异步生成函数
async function* asyncGen(){log(`asyncGen :: enter.`); // B1 行yield mockFetch("google.com",800); // B2 行yield mockFetch("taobao.com",600); // B3 行yield mockFetch("bd.com",100);// B4 行return "asyncGen end."; // B5 行
}// 测试使用异步生成函数function testAsyncGen2(){log(`testAsyncGen2 :: enter.`); // C1 行let ag = asyncGen(); // C2 行let rst1 = ag.next();// C3 行log(`testAsyncGen2 :: rst1 = ${rst1}.`);// C4 行let rst2 = ag.next();// C5 行log(`testAsyncGen2 :: rst2 = ${rst2}, ${rst1 ===rst2}`);// C6 行let rst3 = ag.next(); // C7 行log(`testAsyncGen2 :: rst3 = ${rst3}, ${rst1 ===rst2}, ${rst3 ===rst2}`);// C8 行let rst4 = ag.next(); // C9 行log(`testAsyncGen2 :: rst4 = ${rst4}.`);// C10 行
}
testAsyncGen2();// 以下是执行顺序，很重要，也是很坑的地方
[16:21:38:788] testAsyncGen2 :: enter.  // C1 行
[16:21:38:796] asyncGen :: enter. //B1
[16:21:38:797] mockFetch enter :: url = google.com, ms = 800 // A1
[16:21:38:797] mockFetch new promise enter :: url = google.com, ms = 800 //A2
[16:21:38:798] testAsyncGen2 :: rst1 = [object Promise]. // C4 行
[16:21:38:798] testAsyncGen2 :: rst2 = [object Promise], false // C6 行
[16:21:38:798] testAsyncGen2 :: rst3 = [object Promise], false, false // C8 行
[16:21:38:798] testAsyncGen2 :: rst4 = [object Promise]. // C10 行
[16:21:39:603] mockFetch enter :: url = taobao.com, ms = 600 // A1
[16:21:39:603] mockFetch new promise enter :: url = taobao.com, ms = 600  //A2
[16:21:40:208] mockFetch enter :: url = bd.com, ms = 100 // A1
[16:21:40:208] mockFetch new promise enter :: url = bd.com, ms = 100  //A2

从上面的执行结果可以看出来：异步生成函数，在执行它的next的时候，是按顺序执行完成一个再执行一个的，是串行的执行，并不是并行的执行！！！ 这个比较坑，一定要注意。跟进上述测试结果，基本可以推测，异步执行函数的执行器是这样的（以上述方法为示例讲解）：

1）调用异步生成函数的时候，返回的是一个异步迭代器。

2）异步迭代器在执行next方法的时候，方法先返回了一个promise对象，然后开始启动上述的异步生成器方法：此时会输出B1行：
[16:21:38:796] asyncGen :: enter.  // B1 行

3）函数执行到B2行，遇到yiled表达式，开始调用mockFetch方法，此时执行器进入mockFetch，执行到A1、A2行：
[16:21:38:797] mockFetch enter :: url = google.com, ms = 800 // A1 行
[16:21:38:797] mockFetch new promise enter :: url = google.com, ms = 800 // A2 行

4）mockFetch函数返回Promise对象（暂时叫mfPromise）给B2行的yiled，此时不会再将mfPromise返回给next。

5）执行器进入C4行输出日志，接着进入C5行调用next，注意，注意，此时调用next并没有真正的进入B3行，而是压入了一个执行队列中（有点像事件循环的）,因此此时并没有调用mockFetch函数

6）执行器进入C6行输出日志，接着进入C7行调用next，此时调用next也没有真正的进入B3行，而是压入了一个执行队列中，因此此时并没有调用mockFetch函数

7），因此C5~C10行，顺序执行，调用next的地方，都没有真正的调用，而是压入了一个执行任务队列。等待第一个任务执行完成之后再顺序执行，因此紧挨着输出日志：

[16:21:38:798] testAsyncGen2 :: rst1 = [object Promise]. // C4 行
[16:21:38:798] testAsyncGen2 :: rst2 = [object Promise], false // C6 行
[16:21:38:798] testAsyncGen2 :: rst3 = [object Promise], false, false // C8 行
[16:21:38:798] testAsyncGen2 :: rst4 = [object Promise]. // C10 行

8），800毫秒之后（第一个异步的mock异步时间）mockFetch返回的promise mfPromise 状态变为fullfilled，此时才会将第一个返回的promise rst1的状态也变为fullfilled 的，同时准备回调rst1.then【本次示例没写then哈】

9），紧接着从任务队列里面取出第二次调用next那个任务，开始执行next，此时才进入asyncGen预计的第二个yield部分，开始第二次调用mockFetch，然后进入上述步骤4~8：

[16:21:39:603] mockFetch enter :: url = taobao.com, ms = 600 // A1
[16:21:39:603] mockFetch new promise enter :: url = taobao.com, ms = 600  //A2

10），600毫秒之后，第二次mockFetch返回的promise mfPromise 状态变为fullfilled，此时会将第二次next返回的promise rst2的状态也变为fullfilled 的，同时准备回调rst2.then【本次示例没写then哈】

函数的调用时序图（图中的9、11、14等步骤是JS解释引擎处理的）：

二、generator函数中，结合await使用

进展中。。。

三、直接用作异步迭代器