读书笔记（四）：异步

1. 异步发展

• callback回调层层嵌套。
• Promise.then().then()…。
• generator生成器，yield，yield…。
• async/await是generator的语法糖，能自动执行生成器函数，await, await…。

同步任务：当前主线程将要消化执行的任务，这些任务形成执行栈。
异步任务：不进入主线程，而是进入任务队列，即不会马上进行的任务。
这样的机制保证了虽然js是单线程的，但是对于一些耗时的任务，可以放入任务队列中，不会阻碍其他同步代码执行。

2. setTimeout
如果主线程耗时超过了延时设置时间，那么定时器并不会准时开始执行。

setTimeout(() => {
  console.log('1')
}, 100)

setTimeout(() => {
  console.log('2')
}, 0)

// 2
// 1

延时小的会被先触发，但如果延时都小于4ms，则没有差距，会从上开始执行。

3. 宏任务和微任务

console.log('start')

new Promise((resolve, reject) => {
  console.log('first promise constructor')
  resolve()
})
.then(() => {
  console.log('first promise then')
  return new Promise((resolve, reject) => {
    console.log('second promise constructor')
    resolve()
  })
  .then(() => {
    console.log('second promise then')
  })
})
.then(() => {
  console.log('another first promise then')
})

console.log('end')
// start
// first promise constructor
// end
// first promise then
// second promise constructor
// second promise then
// another first promise then

• 首先输出start，接着是promise构造函数，执行同步代码输出，同时将第一个promise的then方法放入任务队列。
• 继续执行同步代码，输出end。同步代码执行完毕，然后执行任务队列中的逻辑，输出第一个promise的then和第二个promise的构造函数。
• 当在then方法中返回一个promise时，第一个promise的第二个then方法会置于返回的新promise的then方法之后。此时将返回的新promise的then方法放入任务队列中，由于主线程没有其他任务转而执行它的then方法输出。最后执行第一个promise的第二个then方法。

任务队列中的异步任务又分为宏任务和微任务，它们在两个不同的队列中。

• 宏任务包括：setTimeout、setInterval、I/O、事件、postMessage、setImmediate、requestAnimationFrame、UI渲染。
• 微任务包括：Promise.then、MutationObserver、process.nextTick。

每次主线程执行栈为空的时候，引擎都会优先处理微任务队列，再处理宏任务。

4. promise
Promise构造函数返回一个Promise对象实例，它具有一个then方法。在then方法中，有两个函数参数，函数的参数分别对应resolve和reject处理后的值。实例的状态只能从pending变为fulfilled或者rejected，且不可逆转或再次变化。

• 状态具有凝固性。
• 可以在then方法第二个参数中进行错误处理。
• 实例可以添加多个then处理场景。