异步生成器执行过程说明

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

异步生成器特点理解：一旦yield没有被执行，对迭代器的next的调用仅仅会被“记录”而不会执行；当yield被执行并返回内容后，迭代器才能继续执行且按照AsyncGenerator.next被调用是，“记录”下的顺序。
显然这篇文章不能解答迭代器的next会怎样被“记录”，本文章只能给出一个执行顺序上的理解。
但是如果想让输出的效果和代码编写的顺序相同，只要在生成器调用的位置前加上await即可，参考MDN的这篇文档。
关于迭代器和生成器更加详细的使用说明可以参考这篇文章，但这篇文章不能从迭代器实现方式上给出迭代器表现如此的根本原因的说明，但是有使用案例和对迭代器特点的更加详细的说明。
图中代码如下：

1. async function* util_asyncGenerator() {
2.     var i = 1;
3.     while (i < 6)
4.         yield await new Promise((resolve, reject) => {
5.             console.log(`${i}的executer正在执行`);
6.             resolve({massage: i++});
7.         })
8. }
10. async function TEST() {
11.     var generator_res = util_asyncGenerator();
12.     console.log("第1次next之前");
13.     generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
14.     console.log("第1次next结束");
15.     console.log("第2次next之前");
16.     generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
17.     console.log("第2次next结束");   
18.     console.log("第3次next之前");
19.     generator_res.next().then((value) => {console.log(`在微任务中`);console.log(value)})
20.     console.log("第3次next结束");
21.     console.log("第4次next之前");
22.     generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
23.     console.log("第4次next结束");
24.     console.log("第5次next之前");
25.     generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
26.     console.log("第5次next结束");
27.     console.log("宏任务结束，微任务队列将开始");
28. }
30. /*
31. 输出如下：
32. 第1次next之前
33. 1的executer正在执行
34. 第1次next结束
35. 第2次next之前
36. 第2次next结束
37. 第3次next之前
38. 第3次next结束
39. 第4次next之前
40. 第4次next结束
41. 第5次next之前
42. 第5次next结束
43. 宏任务结束，微任务队列将开始
44. 2的executer正在执行
45. 在微任务中
46. {value: {…}, done: false}done: falsevalue: {massage: 1}__proto__: Object
47. 3的executer正在执行
48. 在微任务中
49. {value: {…}, done: false}done: falsevalue: {massage: 2}__proto__: Object
50. 4的executer正在执行
51. 在微任务中
52. {value: {…}, done: false}done: falsevalue: {massage: 3}__proto__: Object
53. 5的executer正在执行
54. 在微任务中
55. {value: {…}, done: false}done: falsevalue: {massage: 4}__proto__: Object
56. 在微任务中
57. {value: {…}, done: false}done: falsevalue: {massage: 5}__proto__: Object
58. */

复制代码

加入了await后的同步版本

1. async function TEST() {
2.     var generator_res = util_asyncGenerator();
3.     console.log("第1次next之前");
4.     await generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
5.     console.log("第1次next结束");
6.     console.log("第2次next之前");
7.     await generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
8.     console.log("第2次next结束");   
9.     console.log("第3次next之前");
10.     await generator_res.next().then((value) => {console.log(`在微任务中`);console.log(value)})
11.     console.log("第3次next结束");
12.     console.log("第4次next之前");
13.     await generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
14.     console.log("第4次next结束");
15.     console.log("第5次next之前");
16.     await generator_res.next().then((value) => {console.log(`在微任务中`); console.log(value)})
17.     console.log("第5次next结束");
18. }
20. /*
21. 输出如下：
22. 第1次next之前
23. 1的executer正在执行
24. 在微任务中
25. {value: {…}, done: false}done: falsevalue: {massage: 1}__proto__: Object
26. 第1次next结束
27. 第2次next之前
28. 2的executer正在执行
29. 在微任务中
30. {value: {…}, done: false}done: falsevalue: {massage: 2}__proto__: Object
31. 第2次next结束
32. 第3次next之前
33. 3的executer正在执行
34. 在微任务中
35. {value: {…}, done: false}done: falsevalue: {massage: 3}__proto__: Object
36. 第3次next结束
37. 第4次next之前
38. 4的executer正在执行
39. 在微任务中
40. {value: {…}, done: false}done: falsevalue: {massage: 4}__proto__: Object
41. 第4次next结束
42. 第5次next之前
43. 5的executer正在执行
44. 在微任务中
45. {value: {…}, done: false}done: falsevalue: {massage: 5}__proto__: Object
46. 第5次next结束
48. */

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！