详解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
4、参考
欢迎技术交流,引用请注明出处。
个人网站:godbmw.com
Github:godbmw
详解promise、async和await的执行顺序的更多相关文章
- async和await的执行顺序问题
说明 : 要了解执行顺序,所需要的知识是了解浏览器js运行机制,以及微任务和宏任务的先后顺序.如果你明白了宏任务.微任务,请往下看: async function async1 () { consol ...
- promise、async和await之执行顺序
async function async1(){ console.log('async1 start') await async2() console.log('async1 end') } asyn ...
- JS中的async/await的执行顺序详解
虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉 ...
- setTimeout、Promise、Async/Await 的执行顺序
问题描述:以下这段代码的执行结果 async function async1() { console.log('async1 start'); await async2(); console.log( ...
- promise, async和await
最开始实现异步的方法:回调函数 method1(function(err, result) { if (err) { throw err; } method2(function(err, result ...
- ES系列之Promise async 和 await
概述 promise是异步编程的一种解决方案,比传统的解决方案—回调函数和事件—更合理更强大. 所谓的promise就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作的结果). Pro ...
- .net 关于Task.Run 和 Async await的执行顺序
一直捋不清楚用Task.Run异步的执行关系,网上找的些说明写得也有点复杂,所以自己做实验测一下. 直接上代码 这个是加await private static void TestFun() { Co ...
- JQuery中$.ajax()方法参数详解 及 async属性说明
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
- 道可道,非常道——详解promise
promise 出来已久,以前一直使用,没有仔细剖析原理,最近在复习es6的知识,写一下自己对于promise的理解. promise是es6的一种异步编程解决方案,避免频繁的回调函数,增强代码的可阅 ...
随机推荐
- Mybatis关系映射
一.一对一关系映射 使用resultType+包装类实现 1.假设问题背景是要求在某一个购物平台的后台程序中添加一个这样的功能:查询某个订单的信息和下该订单的用户信息.首先我们可以知道,一般这样的平台 ...
- 本地调用QQ只需要一句代码
如下图:点击在线客服以后,弹出QQ登录框 经测试,如果已经登录QQ,可能会提示版本不支持该功能,让你升级,但并不一定就是说你QQ版本需要更新,只是因为你QQ已经登录 有的浏览器可能因为出于安全考虑,会 ...
- Vue-Cli 搭建项目 小白
vue-用Vue-cli从零开始搭建一个Vue项目 Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组 ...
- SSH配置免密登录
[参考文章]:linux服务器ssh免密码登录 [参考文章]:ssh分发秘钥时出现错误“Permission denied (publickey,gssapi-keyex,gssapi-with-mi ...
- iOS开发笔记(Swift)-通用App安装引导页的实现
之前一直做的项目都是基于OC开发的,最近开始尝试使用Swift语言来重写整个项目. 本篇文章主要是讲述如何使用Swift来实现常见的通用App安装引导界面. 效果预览: 实现思路: 主要是采用了UIS ...
- redis pipeline 独占链接
pipeline期间将“独占”链接,此期间将不能进行非“管道”类型的其他操作,直到pipeline关闭:如果你的pipeline的指令集很庞大,为了不干扰链接中的其他操作,你可以为pipeline操作 ...
- 对于python setup.py install安装的包如何卸载
easy_install 安装 卸载命令 easy_install -m package-name setup.py安装 帮助你纪录安装细节方便你卸载 python setup.py install ...
- [视频]K8飞刀 一键免杀 IE神洞网马教程
[视频]K8飞刀 一键免杀 IE神洞网马教程 https://pan.baidu.com/s/16ZrTs
- 1-VScode格式化ESlint-方法(最全最好用方法!)
1-VScode格式化ESlint-方法(最全最好用方法!) ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 背景: 近来研究前端,然后一直在百度上找VSc ...
- xlwt set style making error: More than 4094 XFs (styles)
使用Xlwt,当内容过多时,会报错:More than 4094 XFs (styles) 解决方法: wb = xlwt.Workbook(style_compression=2) 使用style_ ...