原文地址：JavaScript async/await: The Good Part, Pitfalls and How to Use
ES7通过介绍async/await使得JavaScript的异步编程实现了重大改进。它提供了一种使用同步代码样式异步访问resoruces的方式，而且不会阻塞主线程。然而，使用它有点棘手。在本文中，我们将从不同的角度探讨async/await，并将展示如何正确有效地使用它们。
async/await的好处
async/await给我们带来的最重要的好处是同步编程风格。我们来看一个例子吧。
async/await版本比
promise版本更容易理解。如果忽略
await关键字，代码看起来就像任何其他同步语言，如Python。
好的一面不仅是可读性,async/await有本地浏览器支持。截至今天，所有主流浏览器 查看都完全支持异步功能。
本机支持意味着您不必转换代码。更重要的是，它有助于调试。当您在函数入口设置断点并跳过await行时，您将看到调试器在bookModel.fetchAll()执行期间暂停一段时间，然后移动到下一 行.filter！这比promise情况要容易得多，在promise情况下你必须在.filter行设置另一个断点 。
async关键字。它声明
getBooksByAuthorWithAwait()函数返回值确保是一个
promise，以便调用者可以安全调用
getBooksByAuthorWithAwait().then(...)或
await getBooksByAuthorWithAwait()。看看下面的代码（不好的做法！）：
getBooksByAuthorWithPromise可以返回一个
promise（正常情况）或一个
null值（例外情况），在这种情况下，调用者不能安全地调用
.then() 。通过
async声明，这种返回
null的情况将不可能出现。
Async/await可能会产生误导
有些文章将async/await与Promise进行比较，并声称它是JavaScript异步编程演变的下一代，我表示不同意。Async/await是一种改进，但它只不过是一种语法糖，它不会完全改变我们的编程风格。
从本质上讲，await函数仍然是promise。在正确使用await函数之前，您必须了解promises，还有就是，大多数情况下您需要同时使用promises和异步函数。
考虑上面示例中的getBooksByAuthorWithAwait()和getBooksByAuthorWithPromises()函数。请注意，它们不仅在功能上相同，而且具有完全相同的接口。
如果直接调用getBooksByAuthorWithAwait()，这意味着将返回一个promise。
嗯，这并不是坏事。只是await这个名称让人感觉“哦，这可以将异步函数转换为同步函数”，这实际上是错误的。
Async/await的坑
那么使用async/await时会出现什么错误？以下一些常见的情况。
太顺序了
虽然await可以使您的代码看起来像同步，但请记住它们仍然是异步的，必须注意避免过于顺序。
await bookModel.fetchAll()将等到fetchAll()返回。- 然后
await authorModel.fetch(authorId)将被调用。 请注意，authorModel.fetch(authorId)它不依赖于bookModel.fetchAll()的结果，实际上它们可以并行调用！但是，通过await在这里使用，这两个调用变为顺序，并且总执行时间将比并行版本长得多。
这是正确的方法：
promise：
await。在复杂的工作流程中，直接使用
promises可能更容易。
错误处理
使用promises，异步函数有两个可能的返回值：已解析的值和被拒绝的值。我们可以.then()用于正常情况，.catch()用于特殊情况。但是，async/await错误处理可能会很棘手。
try…catch
最标准的（我推荐的）方法是使用try...catch语句。当一个await调用时，任何被拒绝的值都将作为异常抛出。这是一个例子：
catch的错误正是被拒绝的值。在我们发现异常后，有几种方法来处理它：
- 处理异常，并返回正常值。（不在
catch块中使用任何return语句，这等同于使用return undefined，也是正常值。） - 抛出它，如果你想让调用者处理它。可以直接抛出普通的错误对象
throw error，这在promise链中允许使用async getBooksByAuthorWithAwait()函数（即仍然可以像这样调用它getBooksByAuthorWithAwait().then(...).catch(error => ...)）; 或者可以使用Error对象包装错误，例如throw new Error(error)，当控制台中显示此错误时，将提供完整的堆栈跟踪。 - 拒绝它，就像
return Promise.reject(error)。这相当于throw error不推荐。
使用try...catch的好处是：
- 简单，传统。只要您有Java或C++等其他语言的经验，就不会有任何困难。
- 如果不需要每步执行错误处理，仍然可以在一个
try...catch块中包装多个await调用在一个位置处理错误。
这种方法也存在一个缺陷。由于try...catch将捕获块中的每个异常，因此将会捕获一些通常不会被promises捕获的异常。想想这个例子：
ReferenceError: cb is not defined错误。错误是由
console.log()输出而不是JavaScript本身。有时这可能是致命的。如果
BookModel被深深地包含在一系列函数调用中，并且其中一个调用吞噬了错误，那么找到这样的未定义错误将非常困难。
使函数返回两个值
另一种错误处理方式受Go语言的启发。它允许异步函数返回错误和结果。有关详细信息，请参阅此博客文章： How to write async await without try-catch blocks in Javascript
简言之，您可以使用这样的await函数：
使用.catch
我们将在这里介绍的最后一种方法是继续使用 .catch()。
回想一下await的功能：它将等待promise完成其工作。再回想一下，promise.catch()也将是一个promise,所以我们可以像这样编写错误处理：
- 它是
promises和await函数的混合体。您仍然需要了解promises的工作原理。 - 错误处理在正常路径之前进行，这样不直观。
结论
ES7引入的关键字async/await肯定是对JavaScript异步编程的改进。它可以使代码更容易阅读和调试。然而，为了正确使用它们，必须完全理解promise，因为它们只不过是语法糖，而潜在的技术仍然是promise。