ES8 で導入された
async/await は、JavaScript での非同期プログラミングにおける優れた改善です。これは、メインスレッドをブロックせずに、同期スタイルのコードを使用して resources に非同期的にアクセスする方法を提供します。ただし、落とし穴や問題もあります。この記事では、async/await をさまざまな観点から検討し、これらの兄弟を正しく効果的に使用する方法を示します。
MDN から確認できます:
async この関数は Promise オブジェクトを返します。 async 関数 (関数ステートメント、関数式、ラムダ式を含む) は、Promise オブジェクトを返します。return が関数内の直接量である場合、 async は、Promise.resolve() を通じて、この直接値を Promise オブジェクトにカプセル化します。
async 関数が値を返さない場合は、Promise.resolve(unknown) を返します。
MDN から学んだこと:
await 私たちが待っているのは式です。この式の評価結果は、Promise オブジェクトまたはその他の値です (つまり、await は任意の式の結果を待つことができます)。
待機対象が Promise オブジェクトでない場合、await 式の結果が待機対象になります。
Promise オブジェクトを待機している場合、await はビジーになります。次のコードをブロックし、Promise オブジェクトが解決されるまで待機し、await 式の結果として解決された値を取得します。
これが、await を非同期関数で使用する必要がある理由です。非同期関数呼び出しはブロッキングを引き起こさず、その内部のすべてのブロッキングは Promise オブジェクトにカプセル化され、非同期に実行されます。
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 現在、すべての主要ブラウザは非同期機能を完全にサポートしています。
ネイティブ ブラウザのサポートにより、コードを切り替える必要がありません。さらに重要なのは、デバッグが容易になることです。関数のエントリ ポイントにブレークポイントを設定し、await 行をステップ オーバーすると、bookModel.fetchAll() がタスクを実行している間、デバッガがしばらく停止し、その後デバッガが停止するのがわかります。次の .filter 行に移動します。これは promise コードよりもはるかに単純です。promise では になければなりません。 .filter 行 に別のブレークポイントを設定します。
もう 1 つのあまり明らかではない利点は、async キーワードです。 asyncStatementgetBooksByAuthorWithAwait()関数の戻り値は 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/wait と Promise を比較し、これが次世代の JavaScript 非同期プログラミング スタイルであると主張しています。 、著者はこれに深く同意しません。 async/await は改善ですが、これは単なる糖衣構文であり、プログラミング スタイルを完全に変えるわけではありません。
本質的に、async 関数は依然として promise です。 async 関数を正しく使用するには、promise を理解する必要があります。さらに悪いことに、ほとんどの場合、promises async とともに を使用する必要があります。 ＃＃＃ 機能。
上記の例のgetBooksByAuthorWithAwait() 関数と getbooksbyauthorwithpromise() 関数を考えてみましょう。これらは機能的に同一であるだけでなく、インターフェースもまったく同じであることに注意してください!
これは、getbooksbyauthorwithwait() が promise を返すことを意味します。 #.then(...) を呼び出す方法としても使用されます。 <p>嗯，这未必是件坏事。只有 <code>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() 直到 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 语法。在 await 调用时，在调用 await 函数时，如果出现非正常状况就会抛出异常,await 命令后面的 promise 对象，运行结果可能是 rejected，所以最好把await 命令放在 try...catch 代码块中。如下例子:
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 }
}在捕捉到异常之后，有几种方法来处理它：
catch 块中使用任何 return 语句相当于使用 return undefined，undefined 也是一个正常值。)throw errorr，它允许你在 promise 链中使用 async getBooksByAuthorWithAwait() 函数(也就是说，可以像getBooksByAuthorWithAwait().then(...).catch(error => ...) 处理错误); 或者可以用 Error 对象将错误封装起来，如 throw new Error(error)，当这个错误在控制台中显示时，它将给出完整的堆栈跟踪信息。return Promise.reject(error) ，这相当于 throw error，所以不建议这样做。使用 try...catch 的好处：
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。这个错误是由console.log()打印出来的的，而不是 JavaScript 本身。有时这可能是致命的:如果 BookModel 被包含在一系列函数调用中，其中一个调用者吞噬了错误，那么就很难找到这样一个未定义的错误。
另一种错误处理方法是受到Go语言的启发。它允许异步函数返回错误和结果。详情请看这篇博客文章:
How to write async await without try-catch blocks in Javascript
简而言之，你可以像这样使用异步函数:
[err, user] = await to(UserModel.findById(1));
作者个人不喜欢这种方法，因为它将 Go 语言的风格带入到了 JavaScript 中，感觉不自然。但在某些情况下，这可能相当有用。
这里介绍的最后一种方法就是继续使用 .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); });这种方法有两个小问题:
ES7引入的 async/await 关键字无疑是对J avaScrip t异步编程的改进。它可以使代码更容易阅读和调试。然而，为了正确地使用它们，必须完全理解 promise，因为 async/await 只不过是 promise 的语法糖，本质上仍然是 promise。
英文原文地址：https://hackernoon.com/javascript-async-await-the-good-part-pitfalls-and-how-to-use-9b759ca21cda
更多编程相关知识，请访问：编程入门！！
以上がJavaScriptでのasync/awaitの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
