理解 JavaScript 的 async/await

看见输入就惊觉了——输入的是两个 Promise 第一类。JavaScript 中的 async/await 是AsyncFunction 优点中的URL。为止，除 IE 以外，常见应用程序和 Node (v7.6+) 都已经全力支持该优点。具体内容全力支持情况能在这里查阅。

我第二次看见 async/await 实蕨URL并不是在 JavaScript 词汇里，而要在 C# 5.0 的句法中。C# 的 async/await 须要在 .NET Framework 4.5 以上的版中采用，因此我还很哀伤了一阵阵——为了要相容 XP 控制系统，他们合作开发的应用软件不能采用低于 4.0 版的 .NET Framework。

我以后在《闲聊触发器初始化“扁平”化》中就谈及了那个难题。不论是在 C# 还是 JavaScript 中，async/await 都是十分棒的优点，它也都是十分甜的句法糖。C# 的 async/await 同时实现有赖于Task 或 Task<Result> 类，而 JavaScript 的 async/await 同时实现，也有赖于 Promise。

现在撇开 C# 和 .NET Framework，埋首研究下 JavaScript 的 async/await。

1. async 和 await 在干嘛

任一两个中文名称都是有象征意义的，先从字面上原意来认知。async 是“触发器”的缩写，而 await 可以认为是 async wait 的缩写。因此如果较好认知 async 用作言明两个 function 是触发器的，而 await 用作等候两个触发器方式继续执行顺利完成。

除此之外还有两个很有趣的句法明确规定，await 根本无法再次出现在 async 表达式中。接着细致入微的好友会产生两个疑点，假如 await 根本无法再次出现在 async 表达式中，那那个 async 表达式如果是不是初始化？

假如须要透过 await 来初始化两个 async 表达式，那那个初始化的外边必须得再包两个 async 表达式，接着……进入进退两难，希冀亏损累累……

假如 async 表达式不须要 await 来初始化，那 async 究竟起个啥促进作用？

1.1. async 起什么促进作用

那个难题的在我看来，async 表达式是是不是处置它的codice的！

他们总之期望它能间接透过 return 句子回到他们想的值，但是假如啊这样，或许就没 await 什么事了。因此，写段标识符来试一试，看它究竟会回到什么：

看见输入就惊觉了——输入的是两个 Promise 第一类。

因此，async 表达式回到的是两个 Promise 第一类。从文档中也能得到那个信息。async 表达式（包含表达式句子、表达式表达式、Lambda表达式）会回到两个 Promise 第一类，假如在表达式中 return 两个间接量，async 会把那个间接量透过 Promise.resolve() 封装成 Promise 对象。

Promise 第一类，就像这样

现在回过头来想下，假如 async 表达式没有codice，又该如何？很容易想到，它会回到 Promise.resolve(undefined)。

联想一下 Promise 的特点——无等候，因此在没有 await 的情况下继续执行 async 表达式，它会立即继续执行，回到两个 Promise 第一类，并且，绝不会阻塞后面的句子。这和普通回到 Promise 第一类的表达式并无二致。

那么下一个关键点就在于 await URL了。

1.2. await 究竟在等啥

一般来说，都认为 await 是在等候两个 async 表达式顺利完成。不过按句法说明，await 等候的是两个表达式，那个表达式的计算结果是 Promise 第一类或者其它值（换句话说，就是没有特殊限定）。

因为 async 表达式回到两个 Promise 第一类，因此 await 能用作等候两个 async 表达式的codice——这也能说是 await 在等 async 表达式，但要清楚，它等的实际是两个codice。注意到 await 不仅仅用作等 Promise 第一类，它能等任一表达式的结果，因此，await 后面实际是能接普通表达式初始化或者间接量的。因此下面那个示例完全能正确运行

1.3. await 等到了要等的，接着呢

await 等到了它要等的东西，两个 Promise 第一类，或者其它值，接着呢？我不得不先说，await 是个运算符，用作组成表达式，await 表达式的运算结果取决于它等的东西。

假如它等到的不是两个 Promise 第一类，那 await 表达式的运算结果就是它等到的东西。

假如它等到的是两个 Promise 对象，await 就忙起来了，它会阻塞后面的标识符，等着 Promise 第一类 resolve，接着得到 resolve 的值，作为 await 表达式的运算结果。

2. async/await 帮他们干了啥

2.1. 作个简单的比较

上面已经说明了 async 会将其后的表达式（表达式表达式或 Lambda）的codice封装成两个 Promise 第一类，而 await 会等候那个 Promise 顺利完成，并将其 resolve 的结果回到出来。

现在举例，用 setTimeout 模拟耗时的触发器操作，先来看看不用 async/await 会是不是写

假如改用 async/await 呢，会是这样

眼尖的同学已经发现 takeLongTime() 没有言明为 async。实际上，takeLongTime() 本身就是回到的 Promise 第一类，加不加 async 结果都一样，假如没明白，请回过头再去看看上面的“async 起什么促进作用”。

又两个疑点产生了，这两段标识符，两种方式对触发器初始化的处置（实际就是对 Promise 第一类的处置）差别并不明显，甚至采用 async/await 还须要多写一些标识符，那它的优势究竟在哪？

2.2. async/await 的优势在于处置 then 链

单一的 Promise 链并不能发现 async/await 的优势，但是，假如须要处置由多个 Promise 组成的 then 链的时候，优势就能体现出来了（很有趣，Promise 透过 then 链来解决多层回调的难题，现在又用 async/await 来进一步优化它）。

假设两个业务，分多个步骤顺利完成，每个步骤都是触发器的，而且依赖于上两个步骤的结果。他们仍然用 setTimeout 来模拟触发器操作：

现在用 Promise 方式来同时实现这三个步骤的处置

输入结果 result 是 step3() 的参数 700 + 200 = 900。doIt() 顺序继续执行了三个步骤，一共用了 300 + 500 + 700 = 1500 毫秒，和 console.time()/console.timeEnd() 计算的结果一致。

假如用 async/await 来同时实现呢，会是这样

结果和以后的 Promise 同时实现是一样的，但是那个标识符看起来是不是清晰得多，几乎跟同步标识符一样

2.3. 还有更酷的

现在把业务要求改一下，仍然是三个步骤，但每两个步骤都须要以后每个步骤的结果。

这回先用 async/await 来写：

除觉得继续执行时间变长了以外，或许和以后的示例没啥区别啊！别急，认真想想假如把它写成 Promise 方式同时实现会是什么样子？

有没有感觉有点复杂的样子？那一堆参数处置，就是 Promise 方案的死穴—— 参数传递太麻烦了，看着就晕！

3.交流

觉得文章能的好友欢迎点赞收藏转发文章~在学习web前端的过程中，往往因为没有资料或者没人指导从而

原文出处：segmentfault

原文作者：边城