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

4、参考

  1. promise、async和await之执行顺序的那点事
  2. 半年工作经验今日头条和美团面试题面经分享
  3. 关于node和chrome运行结果不一样的详解

欢迎技术交流,引用请注明出处。

个人网站:godbmw.com

Github:godbmw

详解promise、async和await的执行顺序的更多相关文章

  1. async和await的执行顺序问题

    说明 : 要了解执行顺序,所需要的知识是了解浏览器js运行机制,以及微任务和宏任务的先后顺序.如果你明白了宏任务.微任务,请往下看: async function async1 () { consol ...

  2. promise、async和await之执行顺序

    async function async1(){ console.log('async1 start') await async2() console.log('async1 end') } asyn ...

  3. JS中的async/await的执行顺序详解

    虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉 ...

  4. setTimeout、Promise、Async/Await 的执行顺序

    问题描述:以下这段代码的执行结果 async function async1() { console.log('async1 start'); await async2(); console.log( ...

  5. promise, async和await

    最开始实现异步的方法:回调函数 method1(function(err, result) { if (err) { throw err; } method2(function(err, result ...

  6. ES系列之Promise async 和 await

    概述 promise是异步编程的一种解决方案,比传统的解决方案—回调函数和事件—更合理更强大. 所谓的promise就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作的结果). Pro ...

  7. .net 关于Task.Run 和 Async await的执行顺序

    一直捋不清楚用Task.Run异步的执行关系,网上找的些说明写得也有点复杂,所以自己做实验测一下. 直接上代码 这个是加await private static void TestFun() { Co ...

  8. JQuery中$.ajax()方法参数详解 及 async属性说明

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

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

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

随机推荐

  1. Mybatis关系映射

    一.一对一关系映射 使用resultType+包装类实现 1.假设问题背景是要求在某一个购物平台的后台程序中添加一个这样的功能:查询某个订单的信息和下该订单的用户信息.首先我们可以知道,一般这样的平台 ...

  2. 本地调用QQ只需要一句代码

    如下图:点击在线客服以后,弹出QQ登录框 经测试,如果已经登录QQ,可能会提示版本不支持该功能,让你升级,但并不一定就是说你QQ版本需要更新,只是因为你QQ已经登录 有的浏览器可能因为出于安全考虑,会 ...

  3. Vue-Cli 搭建项目 小白

    vue-用Vue-cli从零开始搭建一个Vue项目 Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组 ...

  4. SSH配置免密登录

    [参考文章]:linux服务器ssh免密码登录 [参考文章]:ssh分发秘钥时出现错误“Permission denied (publickey,gssapi-keyex,gssapi-with-mi ...

  5. iOS开发笔记(Swift)-通用App安装引导页的实现

    之前一直做的项目都是基于OC开发的,最近开始尝试使用Swift语言来重写整个项目. 本篇文章主要是讲述如何使用Swift来实现常见的通用App安装引导界面. 效果预览: 实现思路: 主要是采用了UIS ...

  6. redis pipeline 独占链接

    pipeline期间将“独占”链接,此期间将不能进行非“管道”类型的其他操作,直到pipeline关闭:如果你的pipeline的指令集很庞大,为了不干扰链接中的其他操作,你可以为pipeline操作 ...

  7. 对于python setup.py install安装的包如何卸载

    easy_install 安装 卸载命令 easy_install -m package-name setup.py安装 帮助你纪录安装细节方便你卸载 python setup.py install ...

  8. [视频]K8飞刀 一键免杀 IE神洞网马教程

    [视频]K8飞刀 一键免杀 IE神洞网马教程 https://pan.baidu.com/s/16ZrTs

  9. 1-VScode格式化ESlint-方法(最全最好用方法!)

    1-VScode格式化ESlint-方法(最全最好用方法!)   ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 背景: 近来研究前端,然后一直在百度上找VSc ...

  10. xlwt set style making error: More than 4094 XFs (styles)

    使用Xlwt,当内容过多时,会报错:More than 4094 XFs (styles) 解决方法: wb = xlwt.Workbook(style_compression=2) 使用style_ ...