当前位置：移动技术网 > IT编程>开发语言>JavaScript > async await 的执行

async await 的执行

2019年03月28日 | 移动技术网IT编程 | 我要评论

async await的执行

注意：本次代码仅在 chrome 73 下进行测试。

start

不了解 async await 的，先去看阮一峰老师的文章。

先来看一道，这其实是考察浏览器的 event loop.

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')

运行结果如下：

script start
async1 start
async2
promise1
script end
async1 end
promise2
settimeout

event loop 浅析

首先 js 是单线程的，所有的任务都在主线程执行，而任务又分为异步任务和同步任务。

当主线程顺序执行所有任务的时候，会执行遇到的同步任务，当遇到异步任务时，会把它推入一个额外的任务队列中，直到所有的同步任务执行完毕，才会取出任务队列中的任务执行。

console.log('同步任务1')

function test () {
  console.log('同步任务2')
}
test()

settimeout(() => console.log('异步任务3'), 0)
console.log('同步任务4')

执行结果：

同步任务1
同步任务2
同步任务4
// 异步任务最后才执行
异步任务3

然而异步任务还分为微任务（micro-task）和宏任务（macro-task），不同的异步任务会进入不同的任务队列中，而在同步任务执行完毕后，主线程会先取出所有的微任务执行，即清空微任务队列，然后才取出一个宏任务执行，接着继续清空微任务队列，之后再取出一个宏任务执行，循环直至任务队列为空，这就是 event loop。

浏览器端的宏任务主要包含：script(整体代码)、settimeout、setinterval、i/o、ui交互事件；微任务主要包含：promise、mutaionobserver(api 用来监视 dom 变动)

console.log('同步任务1')

function test () {
  console.log('同步任务2')
}
test()

settimeout(() => console.log('异步宏任务3'), 0)

function asynctask () {
  return new promise((resolve, reject)=> {
    console.log('同步任务5')      
    resolve()
  })
}

asynctask().then(() => console.log('异步微任务6'))

console.log('同步任务4')

运行结果：

同步任务1
同步任务2
同步任务5
同步任务4
// 微任务是先于宏任务的
异步微任务6
异步宏任务3

注意：promise 里面的代码是立即执行的，then 函数才是异步的。

async await的执行顺序

首先 async 是基于 promise 的，async 函数执行完毕会返回一个 promise。

async function asyncfunc () {
  return 'hhh'
}
// promise {<resolved>: "hhh"}
console.log(asyncfunc())

注意：async 函数返回的 promise 对象，必须等到内部所有await执行完，才会发生状态改变，除非遇到return语句或者抛出错误。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

在执行 async 函数时，碰到了 await 的话，会立即执行紧跟 await 的语句，然后把后续代码推入微任务队列（以这种形式去理解，实际执行并非如此）。

来看这一个例子：

const syn1 = () => console.log(2)
const syn2 = () => new promise((r, j)=>r()).then(()=>console.log(3))

async function asyncfunc () {
  console.log('start')
  await console.log(1);
  await syn1()
  await syn2()
  console.log('end')
  return 7
}

settimeout(() => console.log(5), 0)
console.log(0)
asyncfunc().then(v => console.log(v))
new promise((r, j)=>r()).then(() => console.log(6))
console.log(4)

运行结果：

0
start
1
4
2
6
3
end
7
5

执行顺序是这样的：

首先执行 settimeout，把函数() => console.log(5)推入异步宏任务队列，进行计时 0 毫秒（即使是 0 毫秒也是存在至少 4 毫秒的延迟的。）
```
// 伪代码
//此时异步宏任务队列
[ 0: () => console.log(5) ]
```
执行 console.log(0)，打印 0
执行 asyncfunc()，进入 asyncfunc 函数
执行 console.log('start')，打印 start
执行 await console.log(1)，打印 1

把 asyncfunc 函数后续代码推入微任务队列

//此时微任务队列
[ 0: (
    await syn1() 
    await syn2() 
    console.log('end')
     return 7
  ) 
]

执行 new promise((r, j)=>r()).then(() => console.log(6))，把 then 中的 () => console.log(6)推入微任务队列

//此时微任务队列
[ 0: (
    await syn1() 
    await syn2() 
    console.log('end')
     return 7
  ),
  1: () => console.log(6)
]

执行 console.log(4)，打印 4
同步任务执行完毕，开始清空微任务队列
执行微任务 0: ( await syn1() await syn2() console.log('end') return 7 )，遇到 await，执行 syn1()

进入 syn1函数，执行 console.log(2)，打印 2，把后续代码推入微任务队列

//此时微任务队列
[ 
  0: () => console.log(6),
  1: (
    await syn2() 
    console.log('end')
        return 7
  )   
]

微任务队列非空，继续执行微任务0: () => console.log(6)，打印 6

//此时微任务队列
[ 
  0: (
    await syn2() 
    console.log('end')
        return 7
  )   
]

微任务队列非空，继续执行微任务0: ( await syn2() console.log('end') return 7 )，遇到 await，执行 syn2()
进入 syn2 函数，执行new promise((r, j)=>r()).then(()=>console.log(3))，把 then 中的 () => console.log(3)推入微任务队列
```
//此时微任务队列
[ 
  0: () => console.log(3)
]
```

把后续代码推入微任务队列

//此时微任务队列
[ 
  0: () => console.log(3),
  1: (
    console.log('end')
    return 7
  )
]

微任务队列非空，继续执行微任务0: console.log('3')，打印 3

//此时微任务队列
[ 
  0: (
    console.log('end')
    return 7
  )
]

微任务队列非空，继续执行微任务0: ( console.log('end') return 7 )，打印 end，继续执行 return 7，asyncfunc 函数执行完毕，返回 promise.resolve(7)，执行then(v => console.log(v))，把v => console.log(v)推入微任务队列
```
//此时微任务队列
[ 
  0: console.log(7)
]
```
微任务队列非空，继续执行微任务0: console.log(7)，打印 7
微任务队列为空，执行宏任务0: () => console.log(5)，打印 5
微任务队列为空，宏任务队列为空，执行完毕。

结尾

其实 async await 的执行并非如此，真正的执行方法是 await 会阻塞后面的代码，让出线程，先执行 async 函数外面的同步代码，等同步代码执行完，再回到 async 内部继续执行。

让我们回到开头的面试题：

// 原 async1，async2
async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}

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

// 转换成这样
function async1() {
  console.log('async1 start')
  promise.resolve(async2()).then(() => {
    console.log('async1 end')
    return promise.resolve()
  })  
}

function async2() {
  console.log('async2')
  return promise.resolve()
}

但以这种形式去理解是不是比规范中那晦涩的英文更好理解呢。

最后附上tc39规范。

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

JS--常见面试题整理(附答案）

一.JS面试题1.当a=?时，可以让a同时满足a1,a2,a==3,并输出ok方法一let a=[1,2,3];... [阅读全文]
javascript的短路机制和几种数值取整的方法

1. javascript的短路机制1.1 且运算符（&&）往往用于多个表达式的求值。它的运算规... [阅读全文]
jQuery50个选择器,让你得心应手

jQuery一:概念一个简单的js组件(是一个别人写好的js文件不是jar包)引入jQuery文件<scr... [阅读全文]
JavaScript 好题汇总分享（持续更新，看到好题就写）

前言本文搜集的题目，均来自各大网课、面试题等预编译相关1a = 100;function demo(e) {fu... [阅读全文]
JS中的原型与原型链图解

原型每一个构造器（函数）上面都有一个属性叫prototype，称为原型。它的值是一个对象，这个对象我们称为原型对... [阅读全文]
XMLHttpRequest 2级 &&进度事件&&JSONP

XMLHttpRequest 2级FormDataFormData 为序列化表单以及创建与表单格式相同的数据（... [阅读全文]
XMLHttpRequest对象

AJAX简介AJAX = 异步 JavaScript 和 XML；是一种用于创建快速动态网页的技术。通过在... [阅读全文]
mock入门学习

mockjs入门学习,自动生成数据官网入口：http://mockjs.com/安装：npm i mockjs ... [阅读全文]
使用递归原生实现拷贝&&最简单的方法实现深拷贝

<script> // 第一种:最简单的方法,一行代码实现 JSON.p... [阅读全文]
【剑指 Offer 45】把数组排成最小的数

输入一个非负整数数组，把数组里所有数字拼接起来排成一个数，打印能拼接出的所有数字中最小的一个。示例 1:输入: ... [阅读全文]

网友评论


验证码：

async await 的执行

2019年03月28日 | 移动技术网IT编程 | 我要评论