只使用async 不使用await_如何在 JS 循环中正确使用 async 与 await

引言

async / await是ES7的重要特性之一，也是目前社区里公认的优秀异步解决方案。目前，async / await这个特性已经是stage 3的建议

然而，由于部分开发人员对该语法糖原理的认识不够清晰，泛滥而不加考虑地随意使用async/await ，可能会我们陷入了新的麻烦之中。

概述

下面是随处可见的现代化前端代码：

(async () => {

 const pizzaData = await getPizzaData(); // async call

 const drinkData = await getDrinkData(); // async call

 const chosenPizza = choosePizza(); // sync call

 const chosenDrink = chooseDrink(); // sync call

 await addPizzaToCart(chosenPizza); // async call

 await addDrinkToCart(chosenDrink); // async call

 orderItems(); // async call

})();

await 语法本身没有问题，有时候可能是使用者用错了。当 pizzaData 与 drinkData 之间没有依赖时，顺序的 await 会最多让执行时间增加一倍的 getPizzaData 函数时间，因为 getPizzaData 与 getDrinkData应该并行执行。

回到我们吐槽的回调地狱，虽然代码比较丑，带起码两行回调代码并不会带来阻塞。

看来语法的简化，带来了性能问题，而且直接影响到用户体验，是不是值得我们反思一下？

正确的做法应该是先同时执行函数，再 await 返回值，这样可以并行执行异步函数