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() 推荐写法

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

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