俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

俄罗斯贵宾会Nodejs 中使用 Async/Await

精读《async/await 是把双刃剑》

2018/05/12 · JavaScript · 1 评论 · async, await

原文出处: 黄子毅   

本周精读内容是 《逃离 async/await 地狱》

从一个讨论开始Node 8 LTS 有 async 了很兴奋? 来,说说这 2 段代码的区别。

1 引言

终于,async/await 也被吐槽了。Aditya Agarwal 认为 async/await 语法让我们陷入了新的麻烦之中。

其实,笔者也早就觉得哪儿不对劲了,终于有个人把实话说了出来,async/await 可能会带来麻烦。

async function rejectionWithReturnAwait () {
  try {
    return await Promise.reject(new Error());
  } catch (e) {
    return 'Saved!';
  }
}

async function rejectionWithReturn () {
  try {
    return Promise.reject(new Error());
  } catch (e) {
    return 'Saved!';
  }
}

2 概述

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

(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 })();

1
2
3
4
5
6
7
8
9
(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 返回值,这样可以并行执行异步函数:

(async () => { const pizzaPromise = selectPizza(); const drinkPromise = selectDrink(); await pizzaPromise; await drinkPromise; orderItems(); // async call })();

1
2
3
4
5
6
7
(async () => {
  const pizzaPromise = selectPizza();
  const drinkPromise = selectDrink();
  await pizzaPromise;
  await drinkPromise;
  orderItems(); // async call
})();

或者使用 Promise.all 可以让代码更可读:

(async () => { Promise.all([selectPizza(), selectDrink()]).then(orderItems); // async call })();

1
2
3
(async () => {
  Promise.all([selectPizza(), selectDrink()]).then(orderItems); // async call
})();

看来不要随意的 await,它很可能让你代码性能降低。

上面的代码几乎相同,只是第一段中在Promise函数前有一个await关键字,但是两段代码的运行效果确实千差万别。想要了解其中缘由,且听我娓娓道来。

3 精读

仔细思考为什么 async/await 会被滥用,笔者认为是它的功能比较反直觉导致的。

首先 async/await 真的是语法糖,功能也仅是让代码写的舒服一些。先不看它的语法或者特性,仅从语法糖三个字,就能看出它一定是局限了某些能力。

举个例子,我们利用 html 标签封装了一个组件,带来了便利性的同时,其功能一定是 html 的子集。又比如,某个轮子哥觉得某个组件 api 太复杂,于是基于它封装了一个语法糖,我们多半可以认为这个便捷性是牺牲了部分功能换来的。

功能完整度与使用便利度一直是相互博弈的,很多框架思想的不同开源版本,几乎都是把功能完整度与便利度按照不同比例混合的结果。

那么回到 async/await 它的解决的问题是回调地狱带来的灾难:

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

1
2
3
4
5
a(() => {
  b(() => {
    c();
  });
});

为了减少嵌套结构太多对大脑造成的冲击,async/await 决定这么写:

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

1
2
3
await a();
await b();
await c();

虽然层级上一致了,但逻辑上还是嵌套关系,这不是另一个程度上增加了大脑负担吗?而且这个转换还是隐形的,所以许多时候,我们倾向于忽略它,所以造成了语法糖的滥用。

1. Nodejs想说爱你不容易

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

基于Javascript的语法、非阻塞单线程的特性,使得nodejs在处理I/O时非常麻烦。破解之道依次经历过callback瀑布级回调嵌套、Promises函数、Generator函数 详细参见我的另外一篇学习笔记Nodejs 异步处理的演进

尽管社区和ECMA管委会不断提出解决异步的方案,但是仍不能满足神经质的开发人员对清洁代码矢志不渝追求。直至在ES7中async函数的出现,很快Nodejs社区也在7.6版本中添加了async函数,至此Nodejs无缝链接async函数,Nodejs异步的难题才算是取得了里程碑式的进展。

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:俄罗斯贵宾会Nodejs 中使用 Async/Await

您可能还会对下面的文章感兴趣: