async、await和Promise对比

1. 先看看用 Promise 操作一个异步编程

// ES6 promise 方法
let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('我是p1')
  }, 1000)
})
 
let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('我是p2')
  }, 200)
})
 
let p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('我是p3')
  }, 200)
})
 
// 想让p1完成后, 再执行P2, 再执行P3
p1.then(res => {
  console.log(res)
  p2.then(res => {
    console.log(res)
    p3.then(res => {
      console.log(res)
    })
  })
})
 
/* 要么如下
p1.then(res => {
  console.log(res)
  return p2
})
  .then(res => {
    console.log(res)
    return p3
  })
  .then(res => {
    console.log(res)
  })
*/

2. 再看看用 async 和 await

// 使用 ES7 async  await语法糖
let a1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('我是a1')
    }, 2000)
  })
}
let a2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('我是a2')
    }, 40)
  })
}
let a3 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('我是a3')
    }, 40)
  })
}
 
// 想让a1完成后再执行a2再执行a3
// 看起来更优雅，像同步一样
async function asy() {
  await a1().then(res => {
    console.log(res)
  })
  await a2().then(res => {
    console.log(res)
  })
  await a3().then(res => {
    console.log(res)
  })
}
asy()

3. 区别

自家看区别，谁更优雅！