异步流程

概念

js 是单线程的，也就代表 js 只能一件事情一件事情执行，那如果一件事情执行时间太久，后面要执行的就需要等待，需要等前面的事情执行完成，后面的才会执行。

所以为了解决这个问题，js 委托宿主环境（浏览器）帮忙执行耗时的任务，执行完成后，在通知 js 去执行回调函数，而宿主环境帮我们执行的这些耗时任务也就是异步任务

js 本身是无法发起异步的，但是 es5 之后提出了 Promise 可以进行异步操作

执行流程

1. 主线程先判断任务类型

• 如果是同步任务，主线程自己执行
• 如果是异步任务，交给宿主环境（浏览器）执行

2. 浏览器进行异步任务的执行，每个异步执行完后，会将回调放进任务队列，先执行完成的先放进任务队列，依次放入
3. 等主线程任务全部执行完后，发现主线程没有任务可执行了，会取任务队列中的任务，由于任务队列里是依次放入进来的，所以取得时候也会先取先进来的，也就是先进先出原则
4. 在任务队列中取出来的任务执行完后，在取下一个，依次重复，这个过程也称为 eventLoop 事件轮训

宏任务

由宿主环境发起的异步：宏任务

setTimeOut、setInterval、特殊的（代码块、script）

setTimeOut

setInterval

setImmediate

微任务

由 javascript 自身发起的异步：微任务

执行顺序

1. 先执行宏任务
2. 宏任务执行完后看微任务队列是否有微任务
3. 没有微任务执行下一个宏任务
4. 有微任务将所有微任务执行
5. 执行完微任务，执行下一个宏任务

练习案例

案例 1:

console.log(1)
setTimeout(function() {
  console.log(2)
}, 0)
new Promise(function(resolve) {
  console.log(3)
  resolve()
}).then(function() {
  console.log(4)
})
console.log(5)

答案：1、3、5、4、2

解析：

1. 主线程判断是同步代码还是异步代码
   

console.log(1) // 同步任务
setTimeout(function() {
  console.log(2) // 异步任务：宏任务
}, 0)
new Promise(function(resolve) {
  console.log(3) // 同步任务
  resolve()
}).then(function() {
  console.log(4) // 异步任务：微任务
})
console.log(5) // 同步任务

执行同步任务

console.log(1) // 同步任务
console.log(3) // 同步任务
console.log(5) // 同步任务

执行异步任务：微任务

console.log(4) // 异步任务：微任务

执行异步任务：宏任务

console.log(2) // 异步任务：宏任务

案例 2:

注意点：await 的执行顺序为从右到左，会阻塞后面的代码执行，但并不是直接阻塞 await 的表达式

await 下面（下面不是右面）的代码可以理解为 promise.then(function(){ 回调执行的 })

async function async1() {
  console.log('async1 start')
  await async2()
  // await后面的代码可以理解为promise.then(function(){ 回调执行的 })
  console.log('async1 end')
}
async function async2() {
  console.log('async2')
}
console.log('script start')
setTimeout(function() {
  console.log('setTimeout')
}, 0)
async1()
console.log('script end')

答案：script start、async1 start、async2、script end、async1 end、setTimeout

解析：

1. 主线程判断同步异步

async function async1() {
  console.log('async1 start')
  await async2() // 同步任务
  // await后面的代码可以理解为promise.then(function(){ 回调执行的 })
  console.log('async1 end') // 异步任务：微任务
}
async function async2() {
  console.log('async2')
}
console.log('script start') // 同步任务
setTimeout(function() {
  console.log('setTimeout') // 异步任务：宏任务
}, 0)
async1() // 同步任务
console.log('script end') // 同步任务

2. 执行同步任务

console.log('script start')
console.log('async1 start')
console.log('async2')
console.log('script end')

3. 执行异步任务:微任务

console.log('async1 end')
console.log('setTimeout')