Promise与Async/Await

Event Loop

这个网站很好用 JavaScript Visualizer 9000
示例图

Promise

概念

new Promise((resolve, reject) => {}) 里面的函数是同步(立刻)执行，then/catch/finally里面的函数是异步(进入微任务队列)执行
微任务队列：Promise.then/catch/finally、MutationObserver、process.nextTick、Object.observe
宏任务队列：setTimeout、setInterval、setImmediate、requestAnimationFrame、I/O、UI rendering
微任务队列优先级高于宏任务队列。在每一次事件循环中，只要调用栈为空，就会先执行微任务队列中的任务，直到微任务队列为空，再执行宏任务队列中的任务

示例

Async/Await

概念

async 函数是 Generator 和 Promise 的语法糖
async 函数返回一个 Promise 对象，await 表达式会暂停 async 函数的执行，等待 Promise 的解决，然后恢复 async 函数的执行并返回解决值

可以转换成 Promise 的写法

async function async1() {
  console.log('async1 start')
  await async2() // await为等待promise的状态，然后把值拿到
  console.log('async1 end')
}

async function async2() {
  return Promise.resolve().then(_ => {
    console.log('async2 promise')
  })
}

async1()

// 等价于

function async1() {
  console.log('async1 start');
  async2().then(() => {
    console.log('async1 end');
  });
}

function async2() {
  return new Promise((resolve, reject) => {
    Promise.resolve().then(_ => {
      console.log('async2 promise');
      resolve();
    });
  });
}

async1();