async await 防止滥用及使用注意点

转载自：https://mp.weixin.qq.com/s/FXkw4jmqztffR2RANnEz4A

1.语法糖？!

• 传统写法

  a( ()=>{
  b( ()=>{
      c( ()=>{
          d();
      })
  })
  })

• async await写法

  await a();
  await b();
  await c();
  d();

  虽然层次上一致，但是逻辑上还是层层嵌套关系，而且这种转换是隐形的，所以许多时候，我们倾向于忽视它，从而导致语法糖的滥用。

2.使用注意事项 *

• eg：

  a( ()=>{
  b();
  })
  c( ()=>{
  d();
  })

• async await写法:

  await a();
  b();
  await c();
  d();

  转义成传统写法：

  a( ()=>{
  b();
  c( ()=>{
      d();
  })
  })

  很明显不是预期效果，不可取

• 改进写法

  const resA = a();
  const resC = c();
  await resA();
  b();
  await resC();
  d();

  虽然优化了下性能，但是逻辑还是没有达到效果，虽然a,c同时执行了，但是如果a的执行时间比c长，那么d等待的时间就是a的执行时间了

• 完全隔离两个函数

  ( async () => {
  await a();
  b();
  })()
  ( async ()=>{
  await c();
  d();
  })()

• 或者使用 Promise.all() 推荐写法

  扫描二维码关注公众号，回复： 831599 查看本文章

  async function ab( ()=>{
  await a();
  b();
  })
  async function cd( ()=>{
  await c();
  d();
  })
  Promise.all( [ab(), cd()] )

• 借用原文两句话
  回调方式这么简单的过程是代码，换成async/await居然写完还要反思一下，再反推着去优化性能，这简直比回调地狱还要可怕。
  决定代码质量的是思维，而非框架或语法，async/await虽好，但也要适度哦。