promise/async/await的执行顺序

时间: 2019-03-24阅读: 59标签: 异步

1. 题目和答案

故事还是要从下面这道面试题说起:请问下面这段代码的输出是什么?  

console.log('script start')

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

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

setTimeout(function() {
  console.log('setTimeout')
}, 0)

new Promise(resolve => {
  console.log('Promise')
  resolve()
})
  .then(function() {
    console.log('promise1')
  })
  .then(function() {
    console.log('promise2')
  })

console.log('script end')

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

script start
async2 end
Promise
script end
promise1
promise2
async1 end
setTimeout
注意:在新版本的浏览器中,await输出顺序被“提前”了,请看官耐心慢慢看。


2. 流程解释

边看输出结果,边做解释吧:

  1. 正常输出script start
  2. 执行async1函数,此函数中又调用了async2函数,输出async2 end。回到async1函数,遇到了await,让出线程
  3. 遇到setTimeout,扔到下一轮宏任务队列
  4. 遇到Promise对象,立即执行其函数,输出Promise。其后的resolve,被扔到了微任务队列
  5. 正常输出script end
  6. 此时,此次Event Loop宏任务都执行完了。来看下第二步被扔进来的微任务,因为async2函数是async关键词修饰,因此,将await async2后的代码扔到微任务队列中
  7. 执行第4步被扔到微任务队列的任务,输出promise1和promise2
  8. 执行第6步被扔到微任务队列的任务,输出async1 end
  9. 第一轮EventLoop完成,执行第二轮EventLoop。执行setTimeout中的回调函数,输出setTimeout。


3. 再谈async和await

细心的朋友肯定会发现前面第6步,如果async2函数是没有async关键词修饰的一个普通函数呢?

// 新的async2函数
function async2() {
  console.log('async2 end')
}

输出结果如下所示:

script start
async2 end
Promise
script end
async1 end
promise1
promise2
setTimeout

不同的结果就出现在前面所说的第6步:如果await函数后面的函数是普通函数,那么其后的微任务就正常执行;否则,会将其再放入微任务队列。


4. 其实是V8引擎的BUG

看到前面,正常人都会觉得真奇怪!(但是按照上面的诀窍倒也是可以理解)

然而V8团队确定了这是个bug(很多强行解释要被打脸了),具体的PR请看这里。好在,这个问题已经在最新的Chrome浏览器中被修复了

简单点说,前面两段不同代码的运行结果都是:

script start
async2 end
Promise
script end
async1 end
promise1
promise2
setTimeout

await就是让出线程,其后的代码放入微任务队列(不会再多一次放入的过程),就这么简单了。


来自:https://segmentfault.com/a/1190000018622280


解决Js异步回调的深层嵌套的3种方式

问题:解决异步回调的深层嵌套的问题.(回调地狱),promise对象用于表示一个异步操作的最终状态,promise在回调代码和将要执行这个任务的异步代码之间提供了一种可靠的中间机制来管理回调。

js 多个异步的并发控制

请实现如下的函数,可以批量请求数据,所有的URL地址在urls参数中,同时可以通过max参数 控制请求的并发度。当所有的请求结束后,需要执行callback回调。发请求的函数可以直接使用fetch。

前端异步编程之Promise和async的用法

传统的异步解决方案采用回调函数和事件监听的方式,而这里主要记录两种异步编程的新方案:ES6的新语法Promise;ES2017引入的async函数;Generator函数(略)

JS常用的几种异步流程控制

JavaScript引擎是基于单线程 (Single-threaded) 事件循环的概念构建的,同一时刻只允许一个代码块在执行,所以需要跟踪即将运行的代码,那些代码被放在一个任务队列 (job queue) 中

Nodejs 处理异步(获取异步数据并处理)的方法

回调函数方式:将异步方法如readFile封装到一个自定义函数中,通过将异步方法得到的结果传给自定义方法的回调函数参数。事件驱动方式:使用node events模块,利用其EventEmitter对象

解读react的setSate的异步问题

将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能,React可能会推迟它,稍后会一次性更新这些组件。React不会保证在setState之后,能够立刻拿到改变的结果。

异步的JavaScript

JS本身是一门单线程的语言,所以在执行一些需要等待的任务(eg.等待服务器响应,等待用户输入等)时就会阻塞其他代码。如果在浏览器中JS线程阻塞了,浏览器可能会失去响应,从而造成不好的用户体验。

js异步加载方式有哪些?_详解异步加载js的多种方案

js异步加载又被称为非阻塞加载,浏览器在下载JS的同时,还会进行后续页面处理。那么如何实现js异步加载呢?下面整理了多种实现方案供大家参考。异步加载js方案:Script Dom Element、onload时的异步加载、$(document).ready()、async属性、defer属性、es6模块type=module属性

【JS】异步处理机制的几种方式

Javascript语言的执行环境是单线程,异步模式非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。

ajax异步图片/文件上传的实现_利用FormData对象

在前后分离开发中,经常会遇到上传文件的情况,后端会有一个文件上传接口,通过ajax上传成功后返回图片地址url给前端。

内容以共享、参考为目的,请勿用于商业用途。其版权归原作者所有,如有侵权,请与小编联系,情况属实将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全