理解async和await

简介

• async/await是消灭异步回调的终极武器
• 但和Promise并不互斥

async/await和promise的关系

执行 async 函数，返回的是Promise 对象

await 相当于 Promise 的then

try.catch 可捕获异常，代替了 Promise 的 catch

代码解析

一

async function getData() {
  return await Promise.resolve('I made it!')
}
const data = getData()
console.log(data)

首先需要明确的是async 函数返回一个 Promise 对象。 另外async 函数的调用不会造成阻塞，它内部所有的阻塞都被封装在一个 Promise 对象中异步执行

其实上面那段代码这样写可能更好理解：

async function getData() {
  const res = await Promise.resolve('I made it!')
  return res
}
const data = getData()
console.log(data)

当调用getData()的时候，遇到了await ，getData()会先返回，此时返回的肯定是一个等待状态的Promise。接着执行调用getData()之后的代码，那么这行代码console.log(data)便会紧跟着执行,此时打印的结果肯定是一个处于等待状态的Promise

二

async function a1() {
  console.log('a1 Start')
  await a2()
  // 异步代码--------------------------------------------------------
  console.log('a1 end')
  await a3()
  console.log('a1 end 2')
  // ----------------------------------------------------------------
}

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

async function a3() {
  console.log('a3')
}
console.log('Script Start')
a1()
console.log('Script End')

参考文章

理解 JavaScript 的 async/await

async