详解promise、async和await的执行顺序
说明:
本文摘自 详解 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 66
和node v10
中,正确输出是:
script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout复制代码
2、知识点
显然,这考察的是js中的事件循环和回调队列。注意以下几点:
Promise
优先于setTimeout
宏任务。所以,setTimeout
回调会在最后执行。Promise
一旦被定义,就会立即执行。Promise
的reject
和resolve
是异步执行的回调。所以,resolve()
会被放到回调队列中,在主函数执行完和setTimeout
前调用。await
执行完后,会让出线程。async
标记的函数会返回一个Promise
对象
3、 难点
最令人困惑的,就是
async1 end
在promise2
之后输出
在函数async1
中,执行promise
(
async2
是async
标记的函数,所以默认返回promise
对象
)会发现resolve()
,然后放入回调队列。
接着执行下方的new Promise
中的resolve()
输出promise2
,再回来输出async1 end
。
其中,async1
函数可以写成以下方式(便于理解):
async function async1(){console.log('async1 start')async2().then( _ => {console.log( 'async1 end ')})
}复制代码
3、流程
console.log('script start')
输出:script start
setTimeout
被放在最后调用- 执行
async1
函数,输出async1 start
。然后,进入async2
函数,输出async2
,并返回Promise
对象。回到async1
,由于await
,让出线程,async2
函数返回的Promise
放在回调队列。 - 新new了一个
Promise
对象,输出promise1
。其中的resolve()
被放在回调队列。 console.log('script end')
输出:script end
- 执行回调队列中,
async1
返回的Promise
对象,对象产生的resolve
被放入对调队列。这里不输出任何值。 - 执行回调队列中,下方
Promise
显式声明的resolve
,输出promise2
。 - 执行回调队列中,由于
async1
函数返回的promise
对象的resolve
,输出async1 end
。 - 执行回调队列中,最后的
setTimeout
,输出setTimeout
- finish
转载于:https://juejin.im/post/5c517876f265da615705ddf6
详解promise、async和await的执行顺序相关推荐
- 详解Promise使用与原理
详解Promise使用与原理 一:Promise的概念 二:Promise的生命周期 三:如何让创建一个Promise 四:编写Promise结果处理程序 浅的讲差不多了,深的来了 --> .t ...
- python线程延时函数_详解Python 多线程 Timer定时器/延迟执行、Event事件
Timer继承子Thread类,是Thread的子类,也是线程类,具有线程的能力和特征.这个类用来定义多久执行一个函数. 它的实例是能够延迟执行目标函数的线程,在真正执行目标函数之前,都可以cance ...
- html同时执行多个ajax,Ajax方法详解以及多个Ajax并发执行
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).javascript 先来一段代码html $.ajax({ type: &q ...
- 道可道,非常道——详解promise
promise 出来已久,以前一直使用,没有仔细剖析原理,最近在复习es6的知识,写一下自己对于promise的理解. promise是es6的一种异步编程解决方案,避免频繁的回调函数,增强代码的可阅 ...
- 查看mysql某人执行了什么语句_详解MySQL如何监控系统全部执行过的sql语句
概述 考虑这么一个场景,开发系统时有个模块执行很慢,但是又不知道这中间涉及到什么sql,就可以设想在没什么业务量的时候来监控数据库全部执行过的sql语句,方便排查问题. 涉及命令 1.开启genera ...
- 《Oracle高性能SQL引擎剖析:SQL优化与调优机制详解》一2.3 执行计划各个列的含义...
2.3 执行计划各个列的含义 在执行计划中,除了ID.Operation和Name之外,还有其他一些列.这些列的数据是根据需要从PLAN_TABLE.V$SQL_PLAN.V$SQL_PLAN_STA ...
- linux at命令 详解+例子 仅一次定时执行任务
方法原型 at [-V] [-q x] [-f file] [-mldbv] time at -c job - atq [-V] [-q x] atrm [-V] job - TIME 格式 now ...
- C# async/awit 嵌套异步 执行顺序 分析
使用非异步方法调用可异步方法(内含嵌套异步) 效果图: 代码(在控制台mian函数中运行该函数): private static void AsyncTest(){Func<Task<st ...
- oracle select执行顺序,oracle select执行顺序的详解
oracle select执行顺序的详解 SQL Select语句完整的执行顺序:1.from子句组装来自不同数据源的数据: 2.where子句基于指定的条件对记录行进行筛选: 3.group by子 ...
最新文章
- qq图片选择效果的处理
- 设置EditText光标颜色
- MATLAB在温室中的应用,基于MATLAB的日光温室内气温的图形显示方法与流程
- java数组之binarySearch查找
- 带你看清梦饷集团如何成为上海在线新经济四小龙
- mysql分页原理_转:mysql分页原理和高效率的mysql分页查询语句
- java元注解_Java的元注解
- OpenCV学习笔记:矩阵/向量处理
- 怎样在matlab q-q图上读出斜率,Q分解法潮流计算matlab小程序
- onload同时执行多个事件
- 《深入浅出通信原理》一句话短评
- 小福利,excel的常用高阶函数介绍
- 微生物-神经免疫轴——心血管疾病的预防和治疗希望
- MAR位数反映存储单元的个数笔记
- 28句最精辟有哲理的生活感悟说说,经典至极,总有一句说到你的心里
- 遍历二叉树的递归算法与非递归算法
- Win 10 GTX 960下 Pytorch的安装与验证
- 怎样看待程序员驻场?
- 产品经理知识体系学习与实践指南
- 阿里云mysql创建用户_mysql创建用户-阿里云开发者社区