JavaScript async/await：优点、陷阱及如何使用
翻译练习
原博客地址：JavaScript async/await: The Good Part, Pitfalls and How to Use
ES7中引进的async/await是对JavaScript的异步编程的一个极大改进。它提供了一种同步代码编写风格来获取异步资源的选项，却不阻塞主进程。然后，想很好地使用它也很棘手。在这篇文章中我们将通过不同的角度去探讨async/await，然后展示如何正确、有效地使用它们。
async/await的好处
async/await带给我们最大的好处就是同步的编码风格。让我们看看下面的例子。
// async/await
async getBooksByAuthorWithAwait(authorId) {
const books = await bookModel.fetchAll();
return books.filter(b => b.authorId === authorId);
}
// promise
getBooksByAuthorWithPromise(authorId) {
return bookModel.fetchAll()
.then(books => books.filter(b => b.authorId === authorId));
}
显而易见，async/await的版本比promise的版本更容易理解。如果你忽略await关键词，代码看起来就像其他的的同步语言，比如说Python。
最棒的地方不仅仅是可读性。async/await拥有浏览器的原生支持。目前为止，所有的主流浏览器都完全支持async函数。
原生支持意味着你不用转译代码。更重要的是，它便于调试。当你在函数的入口处设置一个断点，然后步入await这行代码，你将看到调试器在bookModel.fetchAll()执行的时候停了一会，然后移动到下一步.filter代码行。这比promise的情况简单多了，在promise的情况下，你还需要.filter代码行设置一个断点。
另一个不太明显的好处就是async关键词。它声明getBooksByAuthorWithAwait()函数返回的值保证是一个promise，所以调用者可以安全的调用getBooksByAuthorWithAwait().then(...) 或者 await getBooksByAuthorWithAwait()。想一下下面这种情况（不好的实践）：
getBooksByAuthorWithPromise(authorId) {
if (!authorId) {
return null;
}
return bookModel.fetchAll()
.then(books => books.filter(b => b.authorId === authorId));
}
在上面的代码中，getBooksByAuthorWithPromise可能返回一个promise（正常情况）或者返回null（例外情况），这种情况下调用者没办法安全地调用.then()。使用async声明，这种情况变得不可能。
Async/await可能会误导
一些文章对async/await和Promise进行比较，然后宣称async/await是JavaScript异步编程进化的下一代，恕我不敢苟同。Async/await是一种改进而不仅仅是一种语法糖，它并不能完全改变我们的编程风格。
本质上，async函数仍然还是promise。在你正确的使用async函数之前你需要先理解promise，更有甚者，很多时候你需要同时使用async函数的promise。
考虑一下上面例子中的getBooksByAuthorWithAwait() 和getBooksByAuthorWithPromises()函数。请注意它们不仅仅功能完全相同，接口也完全相同。
这意味着，如果你直接调用getBooksByAuthorWithAwait()，它将返回一个promise。
嗯，这并不是一件坏事。只用await的名字给人一种，好的，这个可以把异步函数转换成同步函数，但这种想法完全是错误的。
Async/await的陷阱
那么使用async/await的时候可能会烦那些错误呢？这里有一些常见的错误。
太连续
尽管await可以使你的代码看起来像同步代码，时刻谨记，它们仍然是异步代码，必须小心的去避免太过于连续。
async getBooksAndAuthor(authorId) {
const books = await bookModel.fetchAll();
const author = await authorModel.fetch(authorId);
return {
author,
books: books.filter(book => book.authorId === authorId),
};
}
这段代码看起来逻辑上是正确的，但事实上它是错误的。
await bookModel.fetchAll()会一直等到fetchAll()返回。- 然后
await authorModel.fetch(authorId)被调用。
请注意，authorModel.fetch(authorId)并不依赖bookModel.fetchAll()的结果，事实上它们可以并行调用。然而，这里使用await让这两个函数顺序执行，结果它的执行总时间比并行执行的要更长。
下面是正确的方式：
async getBooksAndAuthor(authorId) {
const bookPromise = bookModel.fetchAll();
const authorPromise = authorModel.fetch(authorId);
const book = await bookPromise;
const author = await authorPromise;
return {
author,
books: books.filter(book => book.authorId === authorId),
};
}
或者更有甚者，你想一个接一个的获取一个列表，你必须依靠promises：
async getAuthors(authorIds) {
// WRONG, this will cause sequential calls
// const authors = _.map(
// authorIds,
// id => await authorModel.fetch(id));
// CORRECT
const promises = _.map(authorIds, id => authorModel.fetch(id));
const authors = await Promise.all(promises);
}
简而言之，你需要异步地去思考工作量，然后使用await同步地编写代码。在负责的工作流中直接使用promise可能会更简单。
错误处理
使用promise时，一个异步的函数有两种可能返回的结果：resolved 值和rejected值。我们可以使用.then去处理正常情况，.catch去处理异常情况。然而，使用async/await时，异常处理可能比较难弄。
try…catch
最标准的（也是最推荐的）方式是使用try...catch语句。当await一个调用时，任何rejeced值都会被当做一个异常抛出。下面是一个例子：
class BookModel {
fetchAll() {
return new Promise((resolve, reject) => {
window.setTimeout(() => { reject({'error': 400}) }, 1000);
});
}
}
// async/await
async getBooksByAuthorWithAwait(authorId) {
try {
const books = await bookModel.fetchAll();
} catch (error) {
console.log(error); // { "error": 400 }
}
被捕获到的错误正是被rejected的值。在我们捕获到异常以后，我们有以下几个处理方式：
- 处理异常然后返回一个正常值。（在
catch代码块中不返回任何值相当一返回undefined，这也算一个正常值。） - 如果你想让调用者处理它，那就把它抛出去。你也可以像
throw error这样直接抛出整个error对象，这允许你在promise链中去使用async getBooksByAuthorWithAwait()函数（例如：你仍然可以像这样去调用getBooksByAuthorWithAwait().then(...).catch(error => ...)）；或者你可以使用Error对象对错误进行包装，像这样：throw new Error(error)，这样，当错误在控制条打印出来的时候，这给你提供一个完整的错误堆栈跟踪。 Reject它，像return Promise.reject(error)这样。这根throw error一样，所以不推荐这样做。
使用try...catch的好处如下：
- 简单，传统。只要你有其他的语言的经验，如
Java或者C++，没有任何困难去理解它。 - 如果没有必要去处理每个步骤的错误的话，你可以在一个
try...catch中去包裹多个await调用，这样可以在一个地方去处理错误。
这种做法也有一个缺陷。因为try...catch会捕获所有的异常，一些不经常被promise捕获的错误也会被捕获。想一下下面这个例子：
class BookModel {
fetchAll() {
cb(); // note `cb` is undefined and will result an exception
return fetch('/books');
}
}
try {
bookModel.fetchAll();
} catch(error) {
console.log(error); // This will print "cb is not defined"
}
运行这段代码，你在控制台会得到一个黑色字体的错误信息：ReferenceError: cb is not defined。这个错误是consol.log输出的，而不是JavaScript输出的。有时候这会是致命的：如果BookModel被一系列的函数调用深深包裹着，而其中的一个调用吞掉了这个错误，那么找到一个像这样的未定义错误将会十分困难。
使函数返回两个值
还有一种错误处理方式是受到了Go语言的启发。它允许异步函数同时返回错误和结果。
简而言之，你可以这样使用异步函数：
[err, user] = await to(UserModel.findById(1));
使用catch
我们将要介绍的最后一种方法是继续使用catch。
回想一下await的功能：它会等待promise完成它的工作。同时也回想一下promise.catch()也会返回一个promise。所以我们可以这样去写错误处理：
// books === undefined if error happens,
// since nothing returned in the catch statement
let books = await bookModel.fetchAll()
.catch((error) => { console.log(error); })
这种做法有两个小问题：
promise和异步函数混合使用。为了读懂它，你仍需要了解promise是如何工作的。- 错误处理先于正常的操作，这是不直观的。
结论
ES7引进的async/await关键词对JavaScript的异步编程来说绝对是一个进步。它使得代码的阅读和调试都更简单。然而，为了正确的使用它，你必须去完全的理解promise，因为它不在仅仅是语法糖，它的底层原理仍然是promise。
希望这篇文章能让你对async/await有一些想法，也能让你避免一些常见的错误。
