在过去的几年中，异步编程在前端领域中变得越来越重要。JavaScript 中的 Promise 提供了一个非常方便的方式来处理异步编程，但是 Promise 仍然需要编写特定的代码逻辑来处理异步代码的执行顺序和错误处理。
ES8 中的 async/await 语法是 Promise 的一个增强版，它提供了更加简洁和直观的方式来处理异步编程。在本文中，我们将深入剖析 async/await 语法，并带您了解它的使用方式，并提供一些学习和指导意义。
async/await 的基本用法
async/await 的核心是将异步代码转换为同步代码的方式。当使用 async 关键字声明一个函数时，它将返回一个 Promise 对象，而该函数内的所有异步代码均返回该 Promise 对象的 resolve 或 reject 方法。例如：
----- -------- ------------ - ------ --- - --------------------- -- ------------------ -- -- --
在上面的示例中，myFunction 返回一个值为 42 的 Promise 对象，而该 Promise 在 myFunction 的最后一行隐式地被 resolve。因此，使用 then 函数将 42 输出到控制台。
使用 await 关键字，可以暂停异步函数的执行并等待一个 Promise 对象的完成。例如：
----- -------- ------------ -
----- ------- - --- ----------------- ------- -- -
------------- -- ----------------- -----
---
----- ------ - ----- -------- -- -- - --
-------------------- -- -- -------
-
-------------在上面的示例中，await 关键字将暂停异步函数的执行，直到 1 秒钟后，promise 被 resolve。然后，await 关键字将 promise 的值 done! 赋给 result 变量，最后，将 result 输出到控制台。
如果在异步函数中使用 await 关键字，那么该异步函数必须是使用 async 关键字声明的。例如：
----- -------- --------------- -
--- -
----- -------------------- - ----- -----------------
----------------------------------
- -------------
---------------------
-
-
----- -------- ---------------- -
----- ------- - --- ----------------- ------- -- -
------------- -- --------------------- -----
---
----- ------ - ----- --------
------ -------
-
----------------在上面的示例中，firstFunction 使用 await 关键字等待 secondFunction 返回的 Promise 对象完成。secondFunction 使用 Promise 返回它的返回值而不是 Promise 对象本身。
async/await 的错误处理
与 Promise 不同，async/await 中的错误处理不能在 Promise 对象中使用 .catch 来处理。相反，async/await 使用 try/catch 来处理异步代码中的错误。
例如：
----- -------- --------------- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-在上面的示例中，try 块尝试获取远程数据，如果出现错误，则使用 catch 块来捕获错误并输出错误消息。
async/await 和 Promise 的比较
async/await 语法被认为是 Promise 的超集。这是因为所有使用 async/await 语法编写的代码都可以转换为 Promise。
例如，以下代码均是等效的：
-- -- ----------- --
----- -------- --------- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------ -----
-
-- -- ------- --
-------- --------- -
------ -------------------------------------
-------------- -- -----------------
-在上面的示例中，两个代码示例都使用异步方式获取远程数据。但是，使用 async/await 可以使代码更加简洁和易于理解。
结论
借助 async/await，可以写出更加简洁、可读性更高的异步代码。相对于 Promise，async/await 语法也更加方便使用。这是因为 async/await 把异步代码转换为同步代码，从而使我们能够使用 try/catch 来处理异步代码中的错误。
建议您掌握 async/await 语法，这将使您在处理异步代码时更加高效和方便。
参考资料
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6713436bad1e889fe20bb232