异步生成器执行过程说明

零点起步

微信小程序js环境中，异步生成器参与的代码，其执行顺序的描述如图所示。

异步生成器特点理解：一旦yield没有被执行，对迭代器的next的调用仅仅会被“记录”而不会执行；当yield被执行并返回内容后，迭代器才能继续执行且按照AsyncGenerator.next被调用是，“记录”下的顺序。

显然这篇文章不能解答迭代器的next会怎样被“记录”，本文章只能给出一个执行顺序上的理解。

但是如果想让输出的效果和代码编写的顺序相同，只要在生成器调用的位置前加上await即可，参考MDN的这篇文档。

关于迭代器和生成器更加详细的使用说明可以参考这篇文章，但这篇文章不能从迭代器实现方式上给出迭代器表现如此的根本原因的说明，但是有使用案例和对迭代器特点的更加详细的说明。

图中代码如下：

async function* util_asyncGenerator() {
    var i = 1;
    while (i < 6)
        yield await new Promise((resolve, reject) => {
            console.log(`${i}的executer正在执行`);
            resolve({massage: i++});
        })
}

async function TEST() {
    var generator_res = util_asyncGenerator();
    console.log("第1次next之前");
    generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
    console.log("第1次next结束");
    console.log("第2次next之前");
    generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
    console.log("第2次next结束");   
    console.log("第3次next之前");
    generator_res.next().then((value) => {console.log(`在微任务中`);console.log(value)})
    console.log("第3次next结束");
    console.log("第4次next之前");
    generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
    console.log("第4次next结束");
    console.log("第5次next之前");
    generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
    console.log("第5次next结束");
    console.log("宏任务结束，微任务队列将开始");
}

/*
输出如下：
第1次next之前
1的executer正在执行
第1次next结束
第2次next之前
第2次next结束
第3次next之前
第3次next结束
第4次next之前
第4次next结束
第5次next之前
第5次next结束
宏任务结束，微任务队列将开始
2的executer正在执行
在微任务中
{value: {…}, done: false}done: falsevalue: {massage: 1}__proto__: Object
3的executer正在执行
在微任务中
{value: {…}, done: false}done: falsevalue: {massage: 2}__proto__: Object
4的executer正在执行
在微任务中
{value: {…}, done: false}done: falsevalue: {massage: 3}__proto__: Object
5的executer正在执行
在微任务中
{value: {…}, done: false}done: falsevalue: {massage: 4}__proto__: Object
在微任务中
{value: {…}, done: false}done: falsevalue: {massage: 5}__proto__: Object
*/

加入了await后的同步版本

async function TEST() {
    var generator_res = util_asyncGenerator();
    console.log("第1次next之前");
    await generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
    console.log("第1次next结束");
    console.log("第2次next之前");
    await generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
    console.log("第2次next结束");   
    console.log("第3次next之前");
    await generator_res.next().then((value) => {console.log(`在微任务中`);console.log(value)})
    console.log("第3次next结束");
    console.log("第4次next之前");
    await generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
    console.log("第4次next结束");
    console.log("第5次next之前");
    await generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
    console.log("第5次next结束");
}

/*
输出如下：
第1次next之前
1的executer正在执行
在微任务中
{value: {…}, done: false}done: falsevalue: {massage: 1}__proto__: Object
第1次next结束
第2次next之前
2的executer正在执行
在微任务中
{value: {…}, done: false}done: falsevalue: {massage: 2}__proto__: Object
第2次next结束
第3次next之前
3的executer正在执行
在微任务中
{value: {…}, done: false}done: falsevalue: {massage: 3}__proto__: Object
第3次next结束
第4次next之前
4的executer正在执行
在微任务中
{value: {…}, done: false}done: falsevalue: {massage: 4}__proto__: Object
第4次next结束
第5次next之前
5的executer正在执行
在微任务中
{value: {…}, done: false}done: falsevalue: {massage: 5}__proto__: Object
第5次next结束

*/

来源：https://www.cnblogs.com/24fahed/p/18781559