19新版教育培训风格演示站

标题: 如何正确合理使用 JavaScript async/await ！ [打印本页]

作者: 小燕秋 时间: 2019-1-11 11:42
标题: 如何正确合理使用 JavaScript async/await ！
[attach]44[/attach]

ES8 引入的 async/await 在 JavaScript 的异步编程中是一个极好的改进。它提供了使用同步样式代码异步访问 resoruces的方式，而不会阻塞主线程。然而，它们也存在一些坑及问题。在本文中，将从不同的角度探讨 async/await，并演示如何正确有效地使用这对兄弟。

前置知识async 作用是什么

从 MDN 可以看出：

async 函数返回的是一个 Promise 对象。async 函数（包含函数语句、函数表达式、Lambda表达式）会返回一个 Promise 对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

如果 async 函数没有返回值，它会返回 Promise.resolve(undefined)。

await 作用是什么

从 MDN 了解到：

await 等待的是一个表达式，这个表达式的计算结果是 Promise 对象或者其它值（换句话说，await 可以等任意表达式的结果）。

如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。

如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

这就是 await 必须用在 async 函数中的原因。async 函数调用不会造成阻塞，它内部所有的阻塞都被封装在一个 Promise 对象中异步执行。

async/await 的优点

async/await 带给我们的最重要的好处是同步编程风格。让我们看一个例子：

很明显，async/await 版本比 promise 版本更容易理解。如果忽略 await 关键字，代码看起来就像任何其他同步语言，比如 Python。

最佳的地方不仅在于可读性。async/await 到今天为止，所有主流浏览器都完全支持异步功能。

[attach]45[/attach]

本地浏览器的支持意味着你不必转换代码。更重要的是，它便于调试。当在函数入口点设置断点并跨过 await 行时，将看到调试器在 bookModel.fetchAll() 执行其任务时暂停片刻，然后它将移动到下一个.filter 行,这比 promise 代码要简单得多，在 promise 中，必须在 .filter 行上设置另一个断点。

[attach]46[/attach]

另一个不太明显的优点是 async 关键字。 async声明 getBooksByAuthorWithAwait()函数返回值确保是一个 promise，因此调用者可以安全地使用 getBooksByAuthorWithAwait().then(...) 或await getBooksByAuthorWithAwait()。想想下面的例子（不好的做法！）：

欢迎光临 19新版教育培训风格演示站 (http://47.100.112.22/demo/train/)