ES9 中的异步 await 和 Promise 功能，使得前端开发工程师编写异步代码更加简单、易懂和可读性更强。在本文中，我们将深入探讨如何在 ES9 中使用异步 await 和 Promise，以及如何充分利用它们的优势。
Promise 的概述
Promise 是一种异步编程模式，它允许我们处理异步操作的结果。Promise 对象有 3 种状态：pending、fulfilled 和 rejected。Promise 在执行过程中，可以进入这些状态中的任何一个状态。Promise 对象一旦进入了 resolved 状态，就永远不会再改变状态。
接下来，我们来看一个实际的 Promise 示例：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
-- ------
----- --------- - -----
-- ----------- -
----------------
- ---- -
---------------
-
---
--------------------- -- -
--------------------
---------------- -- -
---------------------
---在这个示例中，我们创建了一个 Promise 对象，并在构造函数中添加了一个执行器函数。执行器函数返回一个成功的 Promise 对象，该对象的状态为 fulfilled。如果出现了错误，则返回一个 rejected 的 Promise 对象。在这个例子中，我们通过 then 方法处理成功的 Promise 对象并输出结果，通过 catch 方法处理失败的 Promise 对象并输出错误信息。
异步 await 的概述
异步 await 是 ES9 新增的异步编程方式。它采用了一种更直观和简洁的形式来编写异步代码。异步 await 的语法糖使用 async 和 await 两个关键字实现。
接下来，我们来看一个使用异步 await 的示例：
-- -------------------- ---- -------
----- -------- ----------- -
----- ------------ - ----- -------------------
----- -------- - ----- --------------------
----- -------------- - ----- ------------------------------------------
----- ---------- - ----- ----------------------
------ - --------- ---------- --
-
------------------------- -- -
--------------------
---------------- -- -
---------------------
---在这个示例中，我们使用 async 和 await 关键字，将异步操作显式地表达出来。fetchUser 函数是一个异步函数，这意味着函数返回一个 promise 对象，即使它没有显式地返回一个 promise 对象。async 函数使用 await 关键字等待异步操作完成，并将它们的结果暂存起来。最后，我们将所有的异步操作结果返回出去。
Promise 和异步 await 的结合使用
Promise 和异步 await 是一对理想的组合。使用它们可以帮助我们减少回调地狱，以及提高代码的可读性和可维护性。
接下来，我们将使用 Promise 和异步 await 的组合方式来获取 GitHub 上某个用户的详细信息。
-- -------------------- ---- -------
----- -------- ------------------- -
--- -
----- ------------ - ----- --------------------------------------------------
----- -------- - ----- --------------------
----- ------------- - ----- --------------------------
----- --------- - ----- ---------------------
------ - --------- --------- --
- ----- ------- -
---------------------
-
-
---------------------------------- -- -
--------------------
---------------- -- -
---------------------
---在这个示例中，我们编写了一个 fetchUser 函数，它使用了异步操作，并在 try-catch 语句中处理异步操作的错误。我们可以看出，Promise 和异步 await 的结合使用，使得我们能够生成一个清晰和易于理解的异步代码。
结论
在本文中，我们深入探讨了如何在 ES9 中使用异步 await 和 Promise。通过异步 await 和 Promise 编写异步代码，不仅让代码更加可读和易于理解，且能够有效降低代码的复杂度。随着 JavaScript 生态环境的不断发展，异步编程模式的重要性也日益显现，我们需要不断学习和使用异步编程模式，以适应未来的前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67311822eedcc8a97c93c107