zoukankan      html  css  js  c++  java
  • promise/async与await 的执行顺序梳理

    通过代码更容易理解一些:
     1     function testSometing() {
     2       console.log("执行testSometing");
     3       return "testSometing";
     4     }
     5 
     6     async function testAsync() {
     7       console.log("执行testAsync");
     8       return Promise.resolve("hello async");
     9     }
    10 
    11     async function test() {
    12       console.log("test start...");
    13       const v1 = await testSometing();//关键点1
    14       console.log(v1);
    15       const v2 = await testAsync();
    16       console.log(v2);
    17       console.log(v1, v2);
    18     }
    19 
    20     test();
    21 
    22     var promise = new Promise((resolve) => { 
    23          console.log("promise start.."); 
    24          resolve("promise");
    25     }); //关键点2
    26 
    27     promise.then((val) => console.log(val));
    28 
    29     console.log("test end...")

    打印结果是:

       1. 遇见test() 开始执行test函数,最先打印 "test start..."

       2. 执行v1,await表面看是在“等待‘完成执行后才会继续执行后面的代码,实际它是让出线程的一个标志。进入testSometing函数,打印"执行testSometing"

       3. 因为让出线程的标识,会执行后面的promise,打印 "promise start.."

       4. 因为promise机制会把promise推到promise队列中,然后继续执行打印 "test end..."

       5.回到test函数里面继续执行,v1继续执行,有return返回,这里打印 "testSometing"

       6.v1执行完毕执行v2,遇到await testAsync(),进入testAsync函数里面,打印 "执行testAsync"

       7.遇到promise.reslove("hello async")继续推到promise队列中,此时队列中有两个(第4步骤的promise与当前的这个),依次执行,先打印 "promise" 

       8. 再打印 "hello async"

       9. v2执行完,最后打印v1,v2 v1有return,打印 "testSometing",v2返回的是promise成功状态下的"hello async",这里结果是 "testSometing hello async"

    可以看出控制台打印

    欢迎指正~~

  • 相关阅读:
    前端git开发分支各种场景管理
    RxJS Subject学习
    微信小程序登陆流程(20200322)
    vue依赖收集的策略
    eggjs2.x版本异步获取config配置方案
    dubbo连接过程
    计算机中对流的理解
    Egg.js运行环境配置场景
    Promise和Observable的映射
    eggjs异常捕获机制
  • 原文地址:https://www.cnblogs.com/PengZhao-Mr/p/12851632.html
Copyright © 2011-2022 走看看