# event loop
- JS是单线程运行的
- 异步要基于回调来实现
- event loop就是异步回调的实现原理

## JS如何执行？
- 从前到后，一行一行执行
- 如果某一行执行报错，则停止下面代码的执行
- 先把同步代码执行完，再执行异步
示例：
```js
console.log('Hi')

setTimeout(function cb1() {
console.log('cb1') // cb 即 callback
}, 5000)

console.log('Bye')
```
- 同步代码，一行一行放在Call Stack执行
- 遇到异步，会先“记录”下（放进Web APIs中），等待时机（定时、网络请求等）
- 时机到了，就移动到Callback Queue里面
- 如Call Stack为空（即同步代码执行完）Event Loop开始工作
- 轮询查找Callback Queue，如有责移动到Call Stack执行
- 然后继续轮询查找（永动机一样）

## DOM事件和event loop
DOM事件也使用回调，基于event loop
```html
提交


```
---
# promise进阶
## 三种状态
- pending resolved rejected
- pending --> resolved或pending --> rejected
- 变化不可逆
## 状态的表现和变化
- pending状态，不会触发then和catch
- resolved状态，会触发后续的then回调函数
- rejected状态，会触发后续的catch回调函数
## then和catch对状态的影响
- then 正常返回resolved，里面有报错则返回rejected
- catch正常返回resolved，里面有报错则返回rejected

```js
// then() 一般正常返回 resolved 状态的 promise
Promise.resolve().then(() => {
return 100
})

// then() 里抛出错误，会返回 rejected 状态的 promise
Promise.resolve().then(() => {
throw new Error('err')
})

// catch() 不抛出错误，会返回 resolved 状态的 promise
Promise.reject().catch(() => {
console.error('catch some error')
})

// catch() 抛出错误，会返回 rejected 状态的 promise
Promise.reject().catch(() => {
console.error('catch some error')
throw new Error('err')
})
```
看下下面三题：
```js
// 第一题
Promise.resolve().then(() => {
console.log(1)
}).catch(() => {
console.log(2)
}).then(() => {
console.log(3)
})
// 1 3

// 第二题
Promise.resolve().then(() => { // 返回 rejected 状态的 promise
console.log(1)
throw new Error('erro1')
}).catch(() => { // 返回 resolved 状态的 promise
console.log(2)
}).then(() => {
console.log(3)
})
// 1 2 3

// 第三题
Promise.resolve().then(() => { // 返回 rejected 状态的 promise
console.log(1)
throw new Error('erro1')
}).catch(() => { // 返回 resolved 状态的 promise
console.log(2)
}).catch(() => {
console.log(3)
})
// 1 2
```
## 总结
- 三种状态，状态的表现和变化
- then和catch对状态的影响（重要）
- then和catch的链式调用（常考）
---
# async/await
- 异步回调callback hell
- Promise then catch链式调用，但也是基于回调函数
- async/await是同步语法，彻底消灭回调函数
## 语法介绍

用同步的方式，编写异步。

```js
function loadImg(src) {
const promise = new Promise((resolve, reject) => {
const img = document.createElement('img')
img.onload = () => {
resolve(img)
}
img.onerror = () => {
reject(new Error(`图片加载失败 ${src}`))
}
img.src = src
})
return promise
}

async function loadImg1() {
const src1 = 'http://www.imooc.com/static/img/index/logo_new.png'
const img1 = await loadImg(src1)
return img1
}

async function loadImg2() {
const src2 = 'https://avatars3.githubusercontent.com/u/9583120'
const img2 = await loadImg(src2)
return img2
}

(async function () {
// 注意：await 必须放在 async 函数中，否则会报错
try {
// 加载第一张图片
const img1 = await loadImg1()
console.log(img1)
// 加载第二张图片
const img2 = await loadImg2()
console.log(img2)
} catch (ex) {
console.error(ex)
}
})()
```
## async/await和Promise的关系
- async/await事消灭异步回调的终极武器
- 但和Promise并不互斥
- 反而，两者相辅相成
```js
async function fn2() {
return new Promise(() => {})
}
console.log( fn2() )

async function fn1() {
return 100
}
console.log( fn1() ) // 相当于 Promise.resolve(100)
```

- await 后面跟 Promise 对象：会阻断后续代码，等待状态变为 resolved ，才获取结果并继续执行
- await 后续跟非 Promise 对象：会直接返回

```js
(async function () {
const p1 = new Promise(() => {})
await p1
console.log('p1') // 不会执行
})()

(async function () {
const p2 = Promise.resolve(100)
const res = await p2
console.log(res) // 100
})()

(async function () {
const res = await 100
console.log(res) // 100
})()

(async function () {
const p3 = Promise.reject('some err')
const res = await p3
console.log(res) // 不会执行
})()
```

- 执行async函数，返回的事Promise对象
- await相当于Promise的then
- try..catch可捕获异常，代替了Promise的catch
```js
(async function () {
const p4 = Promise.reject('some err')
try {
const res = await p4
console.log(res)
} catch (ex) {
console.error(ex)
}
})()
```
## 异步的本质
- async/await事消灭异步回调的终极武器
- JS还是单线程，还得有异步，还得事基于event loop
- async/await只是一个语法糖，但这颗糖真香！

await 是同步写法，但本质还是异步调用。

```js
async function async1 () {
console.log('async1 start')
await async2()
console.log('async1 end') // 关键在这一步，它相当于放在 callback 中，最后执行
}

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

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

即，只要遇到了 `await` ，后面的代码都相当于放在 callback 里。

## for..of
可以让await挨个串行执行
```js
// 定时算乘法
function multi(num) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(num * num)
}, 1000)
})
}
// // 使用 forEach ，是 1s 之后打印出所有结果，即 3 个值是一起被计算出来的
// function test1 () {
// const nums = [1, 2, 3];
// nums.forEach(async x => {
// const res = await multi(x);
// console.log(res);
// })
// }
// test1();

// 使用 for...of ，可以让计算挨个串行执行
async function test2 () {
const nums = [1, 2, 3];
for (let x of nums) {
// 在 for...of 循环体的内部，遇到 await 会挨个串行计算
const res = await multi(x)
console.log(res)
}
}
test2()
```
---
# 宏任务(macroTask)/微任务(microTask)
## 什么是宏任务，什么是微任务
看下如下代码，打印顺序是什么？为什么？
```js
console.log(100)
setTimeout(() => {
console.log(200)
})
Promise.resolve().then(() => {
console.log(300)
})
console.log(400)
// 100 400 300 200
```
- 宏任务：setTimeout，setInterval，Ajax，DOM 事件
- 微任务：Promise，async/await（对于前端来说）
- 微任务比宏任务执行的更早37R.jedc3.cn
ueM.jedc3.cn
ksH.jedc3.cn
mfO.jedc3.cn
z4N.jedc3.cn
5lT.jedc3.cn
nTk.jedc3.cn
UDS.jedc3.cn
WR0.jedc3.cn
Uw3.jedc3.cn
fqE.jedc3.cn
X8s.jedc3.cn
mbk.jedc3.cn
whx.jedc3.cn
7if.jedc3.cn
0Lq.jedc3.cn
5rc.jedc3.cn
6E9.jedc3.cn
hHz.jedc3.cn
iwo.jedc3.cn
l5W.jedc3.cn
5nC.jedc3.cn
iC7.jedc3.cn
fnu.jedc3.cn
0Hx.jedc3.cn
2ab.jedc3.cn
JUT.jedc3.cn
LgX.jedc3.cn
2WP.jedc3.cn
ELA.jedc3.cn
P03.jedc3.cn
lMT.jedc3.cn
xOb.jedc3.cn
1J0.jedc3.cn
W9K.jedc3.cn
4i3.jedc3.cn
uzI.jedc3.cn
ZGk.jedc3.cn
Gll.jedc3.cn
uoU.jedc3.cn
o6G.jedc3.cn
WHk.jedc3.cn
1W0.jedc3.cn
dbK.jedc3.cn
FPa.jedc3.cn
f6L.jedc3.cn
1P8.jedc3.cn
QxL.jedc3.cn
60y.jedc3.cn
W2c.jedc3.cn


## event loop和DOM渲染
- 每次Call Stack清空（即每次轮询结束），即同步任务执行完
- 都是DOM重新渲染的机会，DOM结构如有改变则重新渲染
- 然后再去触发下一次event loop
```js
const $p1 = $('
一段文字

')
const $p2 = $('
一段文字

')
const $p3 = $('
一段文字

')
$('#container')
.append($p1)
.append($p2)
.append($p3)

console.log('length', $('#container').children().length )
alert('本次 call stack 结束，DOM 结构已更新，但尚未触发渲染')
// （alert 会阻断 js 执行，也会阻断 DOM 渲染，便于查看效果）
// 到此，即本次 call stack 结束后（同步任务都执行完了），浏览器会自动触发渲染，不用代码干预

// 另外，按照 event loop 触发 DOM 渲染时机，setTimeout 时 alert ，就能看到 DOM 渲染后的结果了
setTimeout(function () {
alert('setTimeout 是在下一次 Call Stack ，就能看到 DOM 渲染出来的结果了')
})
```
## 微任务和宏任务的区别
- 宏任务：DOM 渲染后再触发，如setTimeout
- 微任务：DOM 渲染前会触发，如Promise

```js
// 修改 DOM
const $p1 = $('
一段文字

')
const $p2 = $('
一段文字

')
const $p3 = $('
一段文字

')
$('#container')
.append($p1)
.append($p2)
.append($p3)

// // 微任务：渲染之前执行（DOM 结构已更新）
// Promise.resolve().then(() => {
// const length = $('#container').children().length
// alert(`micro task ${length}`)
// })

// 宏任务：渲染之后执行（DOM 结构已更新）
setTimeout(() => {
const length = $('#container').children().length
alert(`macro task ${length}`)
})
```

再深入思考一下：为何两者会有以上区别，一个在渲染前，一个在渲染后？

- 微任务：ES 语法标准之内，JS 引擎来统一处理。即，不用浏览器有任何关于，即可一次性处理完，更快更及时。
- 宏任务：ES 语法没有，JS 引擎不处理，浏览器（或 nodejs）干预处理。

- 微任务是ES6语法规定的
- 宏任务是浏览器规定的

## 微任务在event loop中的执行顺序

1. Call Stack清空
2. 执行当前的微任务（micro task queue）
3. 尝试DOM渲染
4. 触发event loop
## 执行顺序问题

网上很经典的面试题

```js
async function async1 () {
console.log('async1 start')
await async2() // 这一句会同步执行，返回 Promise ，其中的 `console.log('async2')` 也会同步执行
console.log('async1 end') // 上面有 await ，下面就变成了“异步”，类似 cakkback 的功能（微任务）
}

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

console.log('script start')

setTimeout(function () { // 异步，宏任务
console.log('setTimeout')
}, 0)

async1()

new Promise (function (resolve) { // 返回 Promise 之后，即同步执行完成，then 是异步代码
console.log('promise1') // Promise 的函数体会立刻执行>