Async：简洁优雅的异步之道

前言

在异步处理方案中，目前最为简洁优雅的便是async函数(以下简称A函数)。经过必要的分块包装后，A函数能使多个相关的异步操作如同同步操作一样聚合起来，使其相互间的关系更为清晰、过程更为简洁、调试更为方便。它本质是Generator函数的语法糖，通俗的说法是使用G函数进行异步处理的增强版。

龙亭ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

尝试

学习A函数必须有Promise基础，***还了解Generator函数，有需要的可查看延伸小节。

为了直观的感受A函数的魅力，下面使用Promise和A函数进行了相同的异步操作。该异步的目的是获取用户的留言列表，需要分页，分页由后台控制。具体的操作是：先获取到留言的总条数，再更正当前需要显示的页数(每次切换到不同页时，总数目可能会发生变化)，***传递参数并获取到相应的数据。

 
 
 
    
  
  
  
  1. let totalNum = 0; // Total comments number. 
    2. 
  
  
  
  2. let curPage = 1; // Current page index. 
    3. 
  
  
  
  3. let pageSize = 10; // The number of comment displayed in one page. 
    4. 
  
  
  
  4. // 使用A函数的主代码。 
    5. 
  
  
  
  5. async function dealWithAsync() { 
    6. 
  
  
  
  6. totalNum = await getListCount(); 
    7. 
  
  
  
  7. console.log('Get count', totalNum);
    8. 
  
  
  
  8. if (pageSize * (curPage - 1) > totalNum) { 
    9. 
  
  
  
  9. curPage = 1; 
    10. 
  
  
  
  10. } 
    11. 
  
  
  
  11. return getListData(); 
    12. 
  
  
  
  12. } 
    13. 
  
  
  
  13. // 使用Promise的主代码。 
    14. 
  
  
  
  14. function dealWithPromise() { 
    15. 
  
  
  
  15. return new Promise((resolve, reject) => { 
    16. 
  
  
  
  16. getListCount().then(res => { 
    17. 
  
  
  
  17. totalNum = res; 
    18. 
  
  
  
  18. console.log('Get count', res); 
    19. 
  
  
  
  19. if (pageSize * (curPage - 1) > totalNum) { 
    20. 
  
  
  
  20. curPage = 1; 
    21. 
  
  
  
  21. } 
    22. 
  
  
  
  22. return getListData() 
    23. 
  
  
  
  23. }).then(resolve).catch(reject); 
    24. 
  
  
  
  24. }); 
    25. 
  
  
  
  25. } 
    26. 
  
  
  
  26. // 开始执行dealWithAsync函数。 
    27. 
  
  
  
  27. // dealWithAsync().then(res => { 
    28. 
  
  
  
  28. // console.log('Get Data', res) 
    29. 
  
  
  
  29. // }).catch(err => { 
    30. 
  
  
  
  30. // console.log(err); 
    31. 
  
  
  
  31. // }); 
    32. 
  
  
  
  32. // 开始执行dealWithPromise函数。 
    33. 
  
  
  
  33. // dealWithPromise().then(res => { 
    34. 
  
  
  
  34. // console.log('Get Data', res) 
    35. 
  
  
  
  35. // }).catch(err => { 
    36. 
  
  
  
  36. // console.log(err); 
    37. 
  
  
  
  37. // }); 
    38. 
  
  
  
  38. function getListCount() {
    39. 
  
  
  
  39. return createPromise(100).catch(() => { 
    40. 
  
  
  
  40. throw 'Get list count error'; 
    41. 
  
  
  
  41. }); 
    42. 
  
  
  
  42. } 
    43. 
  
  
  
  43. function getListData() { 
    44. 
  
  
  
  44. return createPromise([], { 
    45. 
  
  
  
  45. curPage: curPage, 
    46. 
  
  
  
  46. pageSize: pageSize, 
    47. 
  
  
  
  47. }).catch(() => { 
    48. 
  
  
  
  48. throw 'Get list data error'; 
    49. 
  
  
  
  49. }); 
    50. 
  
  
  
  50. } 
    51. 
  
  
  
  51. function createPromise( 
    52. 
  
  
  
  52. data, // Reback data 
    53. 
  
  
  
  53. params = null, // Request params 
    54. 
  
  
  
  54. isSucceed = true, 
    55. 
  
  
  
  55. timeout = 1000, 
    56. 
  
  
  
  56. ) { 
    57. 
  
  
  
  57. return new Promise((resolve, reject) => { 
    58. 
  
  
  
  58. setTimeout(() => { 
    59. 
  
  
  
  59. isSucceed ? resolve(data) : reject(data); 
    60. 
  
  
  
  60. }, timeout); 
    61. 
  
  
  
  61. }); 
    62. 
  
  
  
  62. } 
    63.

对比dealWithAsync和dealWithPromise两个简单的函数，能直观的发现：使用A函数，除了有await关键字外，与同步代码无异。而使用Promise则需要根据规则增加很多包裹性的链式操作，产生了太多回调函数，不够简约。另外，这里分开了每个异步操作，并规定好各自成功或失败时传递出来的数据，近乎实际开发。

1 登堂

1.1 形式

A函数也是函数，所以具有普通函数该有的性质。不过形式上有两点不同：一是定义A函数时，function关键字前需要有async关键字(意为异步)，表示这是个A函数。二是在A函数内部可以使用await关键字(意为等待)，表示会将其后面跟随的结果当成异步操作并等待其完成。

以下是它的几种定义方式。

 
 
 
    
  
  
  
  1. // 声明式 
    2. 
  
  
  
  2. async function A() {} 
    3. 
  
  
  
  3. // 表达式 
    4. 
  
  
  
  4. let A = async function () {}; 
    5. 
  
  
  
  5. // 作为对象属性 
    6. 
  
  
  
  6. let o = { 
    7. 
  
  
  
  7. A: async function () {} 
    8. 
  
  
  
  8. }; 
    9. 
  
  
  
  9. // 作为对象属性的简写式 
    10. 
  
  
  
  10. let o = { 
    11. 
  
  
  
  11. async A() {} 
    12. 
  
  
  
  12. }; 
    13. 
  
  
  
  13. // 箭头函数 
    14. 
  
  
  
  14. let o = { 
    15. 
  
  
  
  15. A: async () => {} 
    16. 
  
  
  
  16. }; 
    17.

1.2 返回值

执行A函数，会固定的返回一个Promise对象。

得到该对象后便可监设置成功或失败时的回调函数进行监听。如果函数执行顺利并结束，返回的P对象的状态会从等待转变成成功，并输出return命令的返回结果(没有则为undefined)。如果函数执行途中失败，JS会认为A函数已经完成执行，返回的P对象的状态会从等待转变成失败，并输出错误信息。

 
 
 
    
  
  
  
  1. // 成功执行案例 
    2. 
  
  
  
  2. A1().then(res => { 
    3. 
  
  
  
  3. console.log('执行成功', res); // 10 
    4. 
  
  
  
  4. }); 
    5. 
  
  
  
  5. async function A1() { 
    6. 
  
  
  
  6. let n = 1 * 10; 
    7. 
  
  
  
  7. return n; 
    8. 
  
  
  
  8. } 
    9. 
  
  
  
  9. // 失败执行案例 
    10. 
  
  
  
  10. A2().catch(err => { 
    11. 
  
  
  
  11. console.log('执行失败', err); // i is not defined. 
    12. 
  
  
  
  12. }); 
    13. 
  
  
  
  13. async function A2() { 
    14. 
  
  
  
  14. let n = 1 * i; 
    15. 
  
  
  
  15. return n; 
    16. 
  
  
  
  16. } 
    17.

1.3 await

只有在A函数内部才可以使用await命令，存在于A函数内部的普通函数也不行。

引擎会统一将await后面的跟随值视为一个Promise，对于不是Promise对象的值会调用Promise.resolve()进行转化。即便此值为一个Error实例，经过转化后，引擎依然视其为一个成功的Promise，其数据为Error的实例。

当函数执行到await命令时，会暂停执行并等待其后的Promise结束。如果该P对象最终成功，则会返回成功的返回值，相当将await xxx替换成返回值。如果该P对象最终失败，且错误没有被捕获，引擎会直接停止执行A函数并将其返回对象的状态更改为失败，输出错误信息。

***，A函数中的return x表达式，相当于return await x的简写。

 
 
 
    
  
  
  
  1. // 成功执行案例 
    2. 
  
  
  
  2. A1().then(res => { 
    3. 
  
  
  
  3. console.log('执行成功', res); // 约两秒后输出100。 
    4. 
  
  
  
  4. }); 
    5. 
  
  
  
  5. async function A1() { 
    6. 
  
  
  
  6. let n1 = await 10; 
    7. 
  
  
  
  7. let n2 = await new Promise(resolve => { 
    8. 
  
  
  
  8. setTimeout(() => { 
    9. 
  
  
  
  9. resolve(10); 
    10. 
  
  
  
  10. }, 2000); 
    11. 
  
  
  
  11. }); 
    12. 
  
  
  
  12. return n1 * n2; 
    13. 
  
  
  
  13. } 
    14. 
  
  
  
  14. // 失败执行案例 
    15. 
  
  
  
  15. A2().catch(err => { 
    16. 
  
  
  
  16. console.log('执行失败', err); // 约两秒后输出10。 
    17. 
  
  
  
  17. }); 
    18. 
  
  
  
  18. async function A2() { 
    19. 
  
  
  
  19. let n1 = await 10; 
    20. 
  
  
  
  20. let n2 = await new Promise((resolve, reject) => { 
    21. 
  
  
  
  21. setTimeout(() => { 
    22. 
  
  
  
  22. reject(10); 
    23. 
  
  
  
  23. }, 2000); 
    24. 
  
  
  
  24. }); 
    25. 
  
  
  
  25. return n1 * n2;
    26. 
  
  
  
  26. } 
    27.

2 入室

2.1 继发与并发

对于存在于JS语句(for, while等)的await命令，引擎遇到时也会暂停执行。这意味着可以直接使用循环语句处理多个异步。

以下是处理继发的两个例子。A函数处理相继发生的异步尤为简洁，整体上与同步代码无异。

 
 
 
    
  
  
  
  1. // 两个方法A1和A2的行为结果相同，都是每隔一秒输出10，输出三次。 
    2. 
  
  
  
  2. async function A1() { 
    3. 
  
  
  
  3. let n1 = await createPromise(); 
    4. 
  
  
  
  4. console.log('N1', n1); 
    5. 
  
  
  
  5. let n2 = await createPromise(); 
    6. 
  
  
  
  6. console.log('N2', n2); 
    7. 
  
  
  
  7. let n3 = await createPromise(); 
    8. 
  
  
  
  8. console.log('N3', n3); 
    9. 
  
  
  
  9. } 
    10. 
  
  
  
  10. async function A2() { 
    11. 
  
  
  
  11. for (let i = 0; i< 3; i++) { 
    12. 
  
  
  
  12. let n = await createPromise(); 
    13. 
  
  
  
  13. console.log('N' + (i + 1), n); 
    14. 
  
  
  
  14. } 
    15. 
  
  
  
  15. } 
    16. 
  
  
  
  16. function createPromise() { 
    17. 
  
  
  
  17. return new Promise(resolve => { 
    18. 
  
  
  
  18. setTimeout(() => { 
    19. 
  
  
  
  19. resolve(10); 
    20. 
  
  
  
  20. }, 1000); 
    21. 
  
  
  
  21. }); 
    22. 
  
  
  
  22. } 
    23.

接下来是处理并发的三个例子。A1函数使用了Promise.all生成一个聚合异步，虽然简单但灵活性降低了，只有都成功和失败两种情况。A3函数相对A2仅仅为了说明应该怎样配合数组的遍历方法使用async函数。重点在A2函数的理解上。

A2函数使用了循环语句，实际是继发的获取到各个异步值，但在总体的时间上相当并发(这里需要好好理解一番)。因为一开始创建reqs数组时，就已经开始执行了各个异步，之后虽然是逐一继发获取，但总花费时间与遍历顺序无关，恒等于耗时最多的异步所花费的时间(不考虑遍历、执行等其它的时间消耗)。

 
 
 
    
  
  
  
  1. // 三个方法A1, A2和A3的行为结果相同，都是在约一秒后输出[10, 10, 10]。 
    2. 
  
  
  
  2. async function A1() {
    3. 
  
  
  
  3. let res = await Promise.all([createPromise(), createPromise(), createPromise()]); 
    4. 
  
  
  
  4. console.log('Data', res); 
    5. 
  
  
  
  5. } 
    6. 
  
  
  
  6. async function A2() { 
    7. 
  
  
  
  7. let res = []; 
    8. 
  
  
  
  8. let reqs = [createPromise(), createPromise(), createPromise()]; 
    9. 
  
  
  
  9. for (let i = 0; i< reqs.length; i++) { 
    10. 
  
  
  
  10. res[i] = await reqs[i]; 
    11. 
  
  
  
  11. } 
    12. 
  
  
  
  12. console.log('Data', res); 
    13. 
  
  
  
  13. } 
    14. 
  
  
  
  14. async function A3() { 
    15. 
  
  
  
  15. let res = []; 
    16. 
  
  
  
  16. let reqs = [9, 9, 9].map(async (item) => { 
    17. 
  
  
  
  17. let n = await createPromise(item); 
    18. 
  
  
  
  18. return n + 1; 
    19. 
  
  
  
  19. }); 
    20. 
  
  
  
  20. for (let i = 0; i< reqs.length; i++) { 
    21. 
  
  
  
  21. res[i] = await reqs[i]; 
    22. 
  
  
  
  22. } 
    23. 
  
  
  
  23. console.log('Data', res); 
    24. 
  
  
  
  24. } 
    25. 
  
  
  
  25. function createPromise(n = 10) { 
    26. 
  
  
  
  26. return new Promise(resolve => { 
    27. 
  
  
  
  27. setTimeout(() => { 
    28. 
  
  
  
  28. resolve(n); 
    29. 
  
  
  
  29. }, 1000); 
    30. 
  
  
  
  30. }); 
    31. 
  
  
  
  31. } 
    32.

2.2 错误处理

一旦await后面的Promise转变成rejected，整个async函数便会终止。然而很多时候我们不希望因为某个异步操作的失败，就终止整个函数，因此需要进行合理错误处理。注意，这里所说的错误不包括引擎解析或执行的错误，仅仅是状态变为rejected的Promise对象。

处理的方式有两种：一是先行包装Promise对象，使其始终返回一个成功的Promise。二是使用try.catch捕获错误。

 
 
 
    
  
  
  
  1. // A1和A2都执行成，且返回值为10。 
    2. 
  
  
  
  2. A1().then(console.log); 
    3. 
  
  
  
  3. A2().then(console.log); 
    4. 
  
  
  
  4. async function A1() { 
    5. 
  
  
  
  5. let n; 
    6. 
  
  
  
  6. n = await createPromise(true); 
    7. 
  
  
  
  7. return n; 
    8. 
  
  
  
  8. } 
    9. 
  
  
  
  9. async function A2() { 
    10. 
  
  
  
  10. let n; 
    11. 
  
  
  
  11. try { 
    12. 
  
  
  
  12. n = await createPromise(false); 
    13. 
  
  
  
  13. } catch (e) { 
    14. 
  
  
  
  14. n = e; 
    15. 
  
  
  
  15. } 
    16. 
  
  
  
  16. return n; 
    17. 
  
  
  
  17. } 
    18. 
  
  
  
  18. function createPromise(needCatch) { 
    19. 
  
  
  
  19. let p = new Promise((resolve, reject) => { 
    20. 
  
  
  
  20. reject(10); 
    21. 
  
  
  
  21. }); 
    22. 
  
  
  
  22. return needCatch ? p.catch(err => err) : p; 
    23. 
  
  
  
  23. } 
    24.

2.3 实现原理

前言中已经提及，A函数是使用G函数进行异步处理的增强版。既然如此，我们就从其改进的方面入手，来看看其基于G函数的实现原理。A函数相对G函数的改进体现在这几个方面：更好的语义，内置执行器和返回值是Promise。

更好的语义。G函数通过在function后使用*来标识此为G函数，而A函数则是在function前加上async关键字。在G函数中可以使用yield命令暂停执行和交出执行权，而A函数是使用await来等待异步返回结果。很明显，async和await更为语义化。

 
 
 
    
  
  
  
  1. // G函数 
    2. 
  
  
  
  2. function* request() { 
    3. 
  
  
  
  3. let n = yield createPromise(); 
    4. 
  
  
  
  4. } 
    5. 
  
  
  
  5. // A函数 
    6. 
  
  
  
  6. async function request() { 
    7. 
  
  
  
  7. let n = await createPromise(); 
    8. 
  
  
  
  8. } 
    9. 
  
  
  
  9. function createPromise() { 
    10. 
  
  
  
  10. return new Promise(resolve => { 
    11. 
  
  
  
  11. setTimeout(() => { 
    12. 
  
  
  
  12. resolve(10); 
    13. 
  
  
  
  13. }, 1000); 
    14. 
  
  
  
  14. }); 
    15. 
  
  
  
  15. } 
    16.

内置执行器。调用A函数便会一步步自动执行和等待异步操作，直到结束。如果需要使用G函数来自动执行异步操作，需要为其创建一个自执行器。通过自执行器来自动化G函数的执行，其行为与A函数基本相同。可以说，A函数相对G函数***改进便是内置了自执行器。

 
 
 
    
  
  
  
  1. // 两者都是每隔一秒钟打印出10，重复两次。 
    2. 
  
  
  
  2. // A函数 
    3. 
  
  
  
  3. A(); 
    4. 
  
  
  
  4. async function A() { 
    5. 
  
  
  
  5. let n1 = await createPromise(); 
    6. 
  
  
  
  6. console.log(n1); 
    7. 
  
  
  
  7. let n2 = await createPromise(); 
    8. 
  
  
  
  8. console.log(n2); 
    9. 
  
  
  
  9. } 
    10. 
  
  
  
  10. // G函数，使用自执行器执行。 
    11. 
  
  
  
  11. spawn(G); 
    12. 
  
  
  
  12. function* G() { 
    13. 
  
  
  
  13. let n1 = yield createPromise(); 
    14. 
  
  
  
  14. console.log(n1);
    15. 
  
  
  
  15. let n2 = yield createPromise(); 
    16. 
  
  
  
  16. console.log(n2); 
    17. 
  
  
  
  17. } 
    18. 
  
  
  
  18. function spawn(genF) { 
    19. 
  
  
  
  19. return new Promise(function(resolve, reject) { 
    20. 
  
  
  
  20. const gen = genF(); 
    21. 
  
  
  
  21. function step(nextF) { 
    22. 
  
  
  
  22. let next; 
    23. 
  
  
  
  23. try { 
    24. 
  
  
  
  24. next = nextF(); 
    25. 
  
  
  
  25. } catch(e) { 
    26. 
  
  
  
  26. return reject(e); 
    27. 
  
  
  
  27. } 
    28. 
  
  
  
  28. if(next.done) { 
    29. 
  
  
  
  29. return resolve(next.value); 
    30. 
  
  
  
  30. } 
    31. 
  
  
  
  31. Promise.resolve(next.value).then(function(v) { 
    32. 
  
  
  
  32. step(function() { return gen.next(v); }); 
    33. 
  
  
  
  33. }, function(e) { 
    34. 
  
  
  
  34. step(function() { return gen.throw(e); }); 
    35. 
  
  
  
  35. }); 
    36. 
  
  
  
  36. } 
    37. 
  
  
  
  37. step(function() { return gen.next(undefined); }); 
    38. 
  
  
  
  38. }); 
    39. 
  
  
  
  39. } 
    40. 
  
  
  
  40. function createPromise() { 
    41. 
  
  
  
  41. return new Promise(resolve => { 
    42. 
  
  
  
  42. setTimeout(() => {
    43. 
  
  
  
  43. resolve(10); 
    44. 
  
  
  
  44. }, 1000); 
    45. 
  
  
  
  45. }); 
    46. 
  
  
  
  46. } 
    47.

2.4 执行顺序

在了解A函数内部与包含它外部间的执行顺序前，需要明白两点：一为Promise的实例方法是推迟到本轮事件末尾才执行的后执行操作，详情请查看链接。二为Generator函数是通过调用实例方法来切换执行权进而控制程序执行顺序，详情请查看链接。理解好A函数的执行顺序，能更加清楚的把握此三者的存在。

先看以下代码，对比A1、A2和A3方法的结果。

 
 
 
    
  
  
  
  1. F(A1); // 接连打印出：1 3 4 2 5。
    2. 
  
  
  
  2. F(A2); // 接连打印出：1 3 2 4 5。
    3. 
  
  
  
  3. F(A3); // 先打印出：1 3 2，隔两秒后打印出：4 9。
    4. 
  
  
  
  4. function F(A) { 
    5. 
  
  
  
  5. console.log(1); 
    6. 
  
  
  
  6. A().then(console.log); 
    7. 
  
  
  
  7. console.log(2); 
    8. 
  
  
  
  8. } 
    9. 
  
  
  
  9. async function A1() { 
    10. 
  
  
  
  10. console.log(3); 
    11. 
  
  
  
  11. console.log(4); 
    12. 
  
  
  
  12. return 5; 
    13. 
  
  
  
  13. } 
    14. 
  
  
  
  14. async function A2() { 
    15. 
  
  
  
  15. console.log(3); 
    16. 
  
  
  
  16. let n = await 5; 
    17. 
  
  
  
  17. console.log(4); 
    18. 
  
  
  
  18. return n; 
    19. 
  
  
  
  19. } 
    20. 
  
  
  
  20. async function A3() { 
    21. 
  
  
  
  21. console.log(3); 
    22. 
  
  
  
  22. let n = await createPromise(); 
    23. 
  
  
  
  23. console.log(4); 
    24. 
  
  
  
  24. return n; 
    25. 
  
  
  
  25. } 
    26. 
  
  
  
  26. function createPromise() { 
    27. 
  
  
  
  27. return new Promise(resolve => { 
    28. 
  
  
  
  28. setTimeout(() => { 
    29. 
  
  
  
  29. resolve(9); 
    30. 
  
  
  
  30. }, 2000); 
    31. 
  
  
  
  31. }); 
    32. 
  
  
  
  32. } 
    33.

从结果上可归纳出一些表面形态。执行A函数，会即刻执行其函数体，直到遇到await命令。遇到await命令后，执行权会转向A函数外部，即不管A函数内部执行而开始执行外部代码。执行完外部代码(本轮事件)后，才继续执行之前await命令后面的代码。

归纳到此已成功一半，之后着手分析其成因。如果客官您对本楼有所了解，那一定不会忘记‘自执行器’这位大婶吧?估计是忘记了。A函数的本质就是带有自执行器的G函数，所以探究A函数的执行原理就是探究使用自执行器的G函数的执行原理。想起了?

再看下面代码，使用相同逻辑的G函数会得到与A函数相同的结果。

 
 
 
    
  
  
  
  1. F(A); // 先打印出：1 3 2，隔两秒后打印出：4 9。 
    2. 
  
  
  
  2. F(() => { 
    3. 
  
  
  
  3. return spawn(G); 
    4. 
  
  
  
  4. }); // 先打印出：1 3 2，隔两秒后打印出：4 9。 
    5. 
  
  
  
  5. function F(A) { 
    6. 
  
  
  
  6. console.log(1); 
    7. 
  
  
  
  7. A().then(console.log); 
    8. 
  
  
  
  8. console.log(2); 
    9. 
  
  
  
  9. } 
    10. 
  
  
  
  10. async function A() { 
    11. 
  
  
  
  11. console.log(3); 
    12. 
  
  
  
  12. let n = await createPromise(); 
    13. 
  
  
  
  13. console.log(4); 
    14. 
  
  
  
  14. return n; 
    15. 
  
  
  
  15. } 
    16. 
  
  
  
  16. function* G() { 
    17. 
  
  
  
  17. console.log(3); 
    18. 
  
  
  
  18. let n = yield createPromise(); 
    19. 
  
  
  
  19. console.log(4); 
    20. 
  
  
  
  20. return n; 
    21. 
  
  
  
  21. } 
    22. 
  
  
  
  22. function createPromise() { 
    23. 
  
  
  
  23. return new Promise(resolve => { 
    24. 
  
  
  
  24. setTimeout(() => { 
    25. 
  
  
  
  25. resolve(9); 
    26. 
  
  
  
  26. }, 2000); 
    27. 
  
  
  
  27. }); 
    28. 
  
  
  
  28. } 
    29. 
  
  
  
  29. function spawn(genF) { 
    30. 
  
  
  
  30. return new Promise(function(resolve, reject) { 
    31. 
  
  
  
  31. const gen = genF(); 
    32. 
  
  
  
  32. function step(nextF) { 
    33. 
  
  
  
  33. let next; 
    34. 
  
  
  
  34. try {
    35. 
  
  
  
  35.  next = nextF(); 
    36. 
  
  
  
  36. } catch(e) { 
    37. 
  
  
  
  37. return reject(e); 
    38. 
  
  
  
  38. } 
    39. 
  
  
  
  39. if(next.done) { 
    40. 
  
  
  
  40. return resolve(next.value); 
    41. 
  
  
  
  41. } 
    42. 
  
  
  
  42. Promise.resolve(next.value).then(function(v) { 
    43. 
  
  
  
  43. step(function() { return gen.next(v); }); 
    44. 
  
  
  
  44. }, function(e) { 
    45. 
  
  
  
  45. step(function() { return gen.throw(e); }); 
    46. 
  
  
  
  46. }); 
    47. 
  
  
  
  47. }
    48. 
  
  
  
  48. step(function() { return gen.next(undefined); }); 
    49. 
  
  
  
  49. }); 
    50. 
  
  
  
  50. } 
    51.

自动执行G函数时，遇到yield命令后会使用Promise.resolve包裹其后的表达式，并为其设置回调函数。无论该Promise是立刻有了结果还是过某段时间之后，其回调函数都会被推迟到在本轮事件末尾执行。之后再是下一步，再下一步。同样的道理适用于A函数，当遇到await命令时(此处略去三五字)，所以有了如此这般的执行顺序。谢幕。

分享题目：Async：简洁优雅的异步之道
文章链接：http://www.mswzjz.cn/qtweb/news9/108009.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

App设计知识

分类信息网站

成都移动机房　　 　手机网站　　 　vi形象设计　　 　安卓开发　　 　网站建设公司　　 　中国西部信息中心　　 　网站制作报价　　 　马边网站建设　　 　营山网站建设　　 　成都400电话申请　　 　成都商城网站建设公司　　 　梅州网站建设　　 　成都标志设计　　 　江油网站建设　　 　成都网站排名　　 　四川广汉锦华　　 　西部信息中心　　 　路面机械及配件　　 　移动网站建设　　 　梓潼网站建设