[译]JavaScript async / await：好处、坑和正确用法

原文地址：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可使您的代码看起来像同步，但请记住它们仍然是异步的，必须注意避免过于顺序。

此代码看起来逻辑正确。但这是错误的。

1. await bookModel.fetchAll()将等到fetchAll()返回。
2. 而后await authorModel.fetch(authorId)将被调用。 请注意，authorModel.fetch(authorId)它不依赖于bookModel.fetchAll()的结果，实际上它们能够并行调用！可是，经过await在这里使用，这两个调用变为顺序，而且总执行时间将比并行版本长得多。

这是正确的方法：

或者更糟糕的是，若是你想逐个获取一个列表的项，必须依赖 promise：

简单地说，您仍然须要异步考虑工做流，而后尝试同步编写代码 await。在复杂的工做流程中，直接使用 promises可能更容易。

错误处理

使用promises，异步函数有两个可能的返回值：已解析的值和被拒绝的值。咱们能够.then()用于正常状况，.catch()用于特殊状况。可是，async/await错误处理可能会很棘手。

try…catch

最标准的（我推荐的）方法是使用try...catch语句。当一个await调用时，任何被拒绝的值都将做为异常抛出。这是一个例子：

catch的错误正是被拒绝的值。在咱们发现异常后，有几种方法来处理它：

1. 处理异常，并返回正常值。（不在catch块中使用任何return语句，这等同于使用return undefined，也是正常值。）
2. 抛出它，若是你想让调用者处理它。能够直接抛出普通的错误对象throw error，这在promise链中容许使用async getBooksByAuthorWithAwait()函数（即仍然能够像这样调用它getBooksByAuthorWithAwait().then(...).catch(error => ...)）; 或者可使用Error对象包装错误，例如throw new Error(error) ，当控制台中显示此错误时，将提供完整的堆栈跟踪。
3. 拒绝它，就像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函数：

我我的不喜欢这种方法，由于它将Go风格带入JavaScript，感受不天然，但在某些状况下，这可能很是有用。

使用.catch

咱们将在这里介绍的最后一种方法是继续使用 .catch()。

回想一下await的功能：它将等待promise完成其工做。再回想一下，promise.catch()也将是一个promise,因此咱们能够像这样编写错误处理：

这种方法有两个小问题：

1. 它是promises和await函数的混合体。您仍然须要了解promises的工做原理。
2. 错误处理在正常路径以前进行，这样不直观。

结论

ES7引入的关键字async/await确定是对JavaScript异步编程的改进。它可使代码更容易阅读和调试。然而，为了正确使用它们，必须彻底理解promise，由于它们只不过是语法糖，而潜在的技术仍然是promise。