说明:

本文摘自 详解 promise、async和await的执行顺序。

1、题目和答案

一道题题目:下面这段promise、async和await代码,请问控制台打印的顺序?

async function async1(){console.log('async1 start')await async2()console.log('async1 end')
}
async function async2(){console.log('async2')
}
console.log('script start')
setTimeout(function(){console.log('setTimeout')
},0)
async1();
new Promise(function(resolve){console.log('promise1')resolve();
}).then(function(){console.log('promise2')
})
console.log('script end')复制代码

上述,在Chrome 66node v10中,正确输出是:

script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout复制代码

2、知识点

显然,这考察的是js中的事件循环和回调队列。注意以下几点:

  • Promise优先于setTimeout宏任务。所以,setTimeout回调会在最后执行。
  • Promise一旦被定义,就会立即执行。
  • Promiserejectresolve是异步执行的回调。所以,resolve()会被放到回调队列中,在主函数执行完和setTimeout前调用。
  • await执行完后,会让出线程。async标记的函数会返回一个Promise对象

3、 难点

最令人困惑的,就是async1 endpromise2之后输出

在函数async1中,执行promise

由于async2async标记的函数,所以默认返回promise对象

)会发现resolve(),然后放入回调队列。

接着执行下方的new Promise中的resolve()输出promise2,再回来输出async1 end

其中,async1函数可以写成以下方式(便于理解):

async function async1(){console.log('async1 start')async2().then( _ => {console.log( 'async1 end ')})
}复制代码

3、流程

  1. console.log('script start')输出:script start
  2. setTimeout被放在最后调用
  3. 执行async1函数,输出async1 start。然后,进入async2函数,输出async2,并返回Promise对象。回到async1,由于await,让出线程,async2函数返回的Promise放在回调队列
  4. 新new了一个Promise对象,输出promise1。其中的resolve()被放在回调队列。
  5. console.log('script end')输出:script end
  6. 执行回调队列中,async1返回的Promise对象,对象产生的resolve被放入对调队列。这里不输出任何值。
  7. 执行回调队列中,下方Promise显式声明的resolve,输出promise2
  8. 执行回调队列中,由于async1函数返回的promise对象的resolve,输出async1 end
  9. 执行回调队列中,最后的setTimeout,输出setTimeout
  10. finish

转载于:https://juejin.im/post/5c517876f265da615705ddf6

详解promise、async和await的执行顺序相关推荐

  1. 详解Promise使用与原理

    详解Promise使用与原理 一:Promise的概念 二:Promise的生命周期 三:如何让创建一个Promise 四:编写Promise结果处理程序 浅的讲差不多了,深的来了 --> .t ...

  2. python线程延时函数_详解Python 多线程 Timer定时器/延迟执行、Event事件

    Timer继承子Thread类,是Thread的子类,也是线程类,具有线程的能力和特征.这个类用来定义多久执行一个函数. 它的实例是能够延迟执行目标函数的线程,在真正执行目标函数之前,都可以cance ...

  3. html同时执行多个ajax,Ajax方法详解以及多个Ajax并发执行

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).javascript 先来一段代码html $.ajax({ type: &q ...

  4. 道可道,非常道——详解promise

    promise 出来已久,以前一直使用,没有仔细剖析原理,最近在复习es6的知识,写一下自己对于promise的理解. promise是es6的一种异步编程解决方案,避免频繁的回调函数,增强代码的可阅 ...

  5. 查看mysql某人执行了什么语句_详解MySQL如何监控系统全部执行过的sql语句

    概述 考虑这么一个场景,开发系统时有个模块执行很慢,但是又不知道这中间涉及到什么sql,就可以设想在没什么业务量的时候来监控数据库全部执行过的sql语句,方便排查问题. 涉及命令 1.开启genera ...

  6. 《Oracle高性能SQL引擎剖析:SQL优化与调优机制详解》一2.3 执行计划各个列的含义...

    2.3 执行计划各个列的含义 在执行计划中,除了ID.Operation和Name之外,还有其他一些列.这些列的数据是根据需要从PLAN_TABLE.V$SQL_PLAN.V$SQL_PLAN_STA ...

  7. linux at命令 详解+例子 仅一次定时执行任务

    方法原型 at [-V] [-q x] [-f file] [-mldbv] time at -c job - atq [-V] [-q x] atrm [-V] job - TIME 格式 now ...

  8. C# async/awit 嵌套异步 执行顺序 分析

    使用非异步方法调用可异步方法(内含嵌套异步) 效果图: 代码(在控制台mian函数中运行该函数): private static void AsyncTest(){Func<Task<st ...

  9. oracle select执行顺序,oracle select执行顺序的详解

    oracle select执行顺序的详解 SQL Select语句完整的执行顺序:1.from子句组装来自不同数据源的数据: 2.where子句基于指定的条件对记录行进行筛选: 3.group by子 ...

最新文章

  1. qq图片选择效果的处理
  2. 设置EditText光标颜色
  3. MATLAB在温室中的应用,基于MATLAB的日光温室内气温的图形显示方法与流程
  4. java数组之binarySearch查找
  5. 带你看清梦饷集团如何成为上海在线新经济四小龙
  6. mysql分页原理_转:mysql分页原理和高效率的mysql分页查询语句
  7. java元注解_Java的元注解
  8. OpenCV学习笔记:矩阵/向量处理
  9. 怎样在matlab q-q图上读出斜率,Q分解法潮流计算matlab小程序
  10. onload同时执行多个事件
  11. 《深入浅出通信原理》一句话短评
  12. 小福利,excel的常用高阶函数介绍
  13. 微生物-神经免疫轴——心血管疾病的预防和治疗希望
  14. MAR位数反映存储单元的个数笔记
  15. 28句最精辟有哲理的生活感悟说说,经典至极,总有一句说到你的心里
  16. 遍历二叉树的递归算法与非递归算法
  17. Win 10 GTX 960下 Pytorch的安装与验证
  18. 怎样看待程序员驻场?
  19. 产品经理知识体系学习与实践指南
  20. 阿里云mysql创建用户_mysql创建用户-阿里云开发者社区

热门文章

  1. editplus查找文件中的字符串
  2. Idea查看文件结构,类似Eclipse中Ctrl+O
  3. MySql视图view的使用:创建、修改、删除
  4. vb 开机到现在的时间
  5. 彪悍语录系列(摘于网络)
  6. 揭秘:快手用AI在短视频里玩出三大花样,背后是怎样的技术原理?
  7. 为了自动驾驶,沃尔沃包养了激光雷达公司Luminar
  8. 牛客OI周赛6-提高组 B 践踏
  9. rabbitmq 更细致的过滤
  10. 一个优雅地探索相关性的新可视化方法