随着 JavaScript 代码变得越来越复杂，异步编程也变得越来越重要。我们很快发现回调地狱降低了代码的可读性，并且异常处理变得困难。随着 Promise 和异步 / await 函数的引入，异步编程变得更加容易和可读性更高。
在 ECMAScript 2016（ES7）中引入了异步 / await，这是一种基于 Promise 的语法，可用于更简单和更可读的异步编程。本文将介绍如何在 ECMAScript 2016 中使用异步 / await。
什么是异步 / await？
async / await 是用于异步编程的 ES7 新功能，旨在简化 Promise 的使用，使异步代码更加易于编写和理解。异步 / await 基于 Promise，但它使用了更直观的语法。
async / await 机制使用 async 函数来声明异步操作。在这个 async 函数中，我们可以使用 await 关键字来等待 Promise 对象的解决，而无需回调函数。在完成 Promise 对象后，await 表达式返回 Promise 的值。
以下是一个使用 Promise 的简单示例代码：
-- -------------------- ---- -------
-------- ------------- -
------ --- ----------------- ------- -- -
------------- -- -
--------------- ---------
-- ------
---
-
------------------------- -- -
--------------------
------------ -- -
-------------------
---使用异步 / await，可以使用以下代码来完成同样的任务：
-- -------------------- ---- -------
----- -------- ------------- -
------ --- ----------------- ------- -- -
------------- -- -
--------------- ---------
-- ------
---
-
----- -------- ------ -
--- -
----- ------ - ----- --------------
--------------------
- ----- ----- -
-------------------
-
-
-------如上代码所示，可以看到我们使用了 async 关键字来声明异步函数，使用 await 关键字等待异步操作完成，并捕获我们使用 try / catch 结构的任何异常。
使用 async 函数
使用异步 / await 的第一步是定义一个 async 函数。 async 函数是一种使函数返回一个 Promise 的机制，无论函数是否显式返回 Promise 对象。以下是一个使用 async 函数的示例：
async function doSomethingAsync() {}异步函数总是返回一个 Promise 对象。在 async 函数内部，我们可以使用以下语法来等待一个 Promise 对象完成：
const result = await promise;
在上面的代码中，await 将等待 Promise 对象完成，并返回其解析值。这使得代码看起来更像同步代码，而不是使用回调函数的典型异步代码。
需要注意的是，只有在 async 函数内部才可以使用 await 表达式。如果在普通函数中使用 await，会导致语法错误。
错误处理
当使用 async / await 时，我们可以使用 try / catch 结构来处理异常。以下是一个使用 try / catch 结构的示例：
async function doSomething() {
try {
const result = await somethingThatReturnsAPromise();
// 处理 result
} catch (err) {
// 处理错误
}
}在上面的代码中，如果 somethingThatReturnsAPromise() 返回一个解析值，则该值保存在 result 中。如果出现错误，则控制权转移到 catch 代码块中。
不要阻塞事件循环
尽管异步 / await 使异步编程更加容易和可读性更高，但它并不是一种线程机制。在大多数情况下，异步 / await 并不会比 Promise 更快，只是更容易阅读和理解。
请注意，在使用异步 / await 时，请不要阻塞事件循环。异步 / await 依赖 Promise，后者本质上是通过将异步操作放入事件队列来实现的。如果您在异步 / await 函数中执行了大量计算，并且没有将其拆分为多个操作，则可能会阻塞事件循环，并且 UI 可能会响应缓慢。
示例代码
以下示例代码演示了如何在 ECMAScript 2016 中使用异步 / await：
-- -------------------- ---- -------
-------- -------------------- ---- -
------ --- ----------------- ------- -- -
------------- -- -
----- ------------ - ------------------------ - ---- - --- - --- - ----
----------------------
-- ------
---
-
----- -------- ------ -
--- -
----- ------- - ----- ------------------ ----
------------------- -- -------------
----- ------- - ----- ------------------ ----
------------------- -- -------------
----------------- --------- - -----------
- ----- ----- -
-------------------
-
-
-------在上面的代码中，我们定义了一个获取随机数的 Promise 函数。在主函数中，我们使用 await 关键字等待 Promise 完成，并在我们获取的两个随机数之间计算和。
总结
异步 / await 是 ES7 中引入的一种语法机制，旨在使异步编程更加容易和可读性更高。异步 / await 基于 Promise，但使用了更直观的语法。在异步代码中，我们使用 async / await、 Promise 和 try / catch 结构来处理异步操作，并确保不会阻塞事件循环。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bf849d9e06631ab9bf264c