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

这段代码看起来逻辑上是正确的，但事实上它是错误的。

1. await bookModel.fetchAll() 会一直等到fetchAll() 返回。
2. 然后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有一些想法，也能让你避免一些常见的错误。