在现代 Web 开发中，异步编程是至关重要的。不管是处理用户输入，与 API 通信，还是处理大量数据，你都需要使用异步编程来避免页面冻结或者无响应。
在 JavaScript 中，通常使用回调函数来实现异步编程，但回调函数嵌套层数很容易增加，导致代码变得难以理解和维护。为了解决这个问题，JavaScript 引入了 Promises 和 Async/Await。
Promises
Promise 是处理异步编程的一种方式，它是一个代表着异步操作的对象。Promise 有三个状态：pending（进行中）、fulfilled（已完成）和 rejected（已拒绝）。当异步操作执行完毕时，Promise 对象的状态将从pending 变为fulfilled 或 rejected，表示异步操作完成或出现错误。
使用 Promise 可以避免回调函数多层嵌套的问题，提高代码可读性和可维护性。下面是一个 Promise 的示例：
-- -------------------- ---- -------
-------- ------------ -
------ --- ------------------------- ------- -
--- --- - --- -----------------
--------------- -----
---------- - ---------- -
-- ----------- --- ---- -
----------------------
- ---- -
------------------------------
-
--
----------- - ---------- -
--------------------- ---------
--
-----------
---
-
---------------------------------------
------------------------ -
----------------------- ----------
--
---------------------- -
------------------------ -------
---在这个例子中，我们使用了 XMLHttpRequest 发送了一个 HTTP 请求，如果请求成功，则使用 resolve 方法将响应传递给 then 方法。如果请求失败，则使用 reject 方法将错误传递给 catch 方法。
Async/Await
Async/Await 是在 ES8 中引入的异步编程方式。它是 Promise 的一种语法糖，使异步代码的编写更加简洁和易读。使用 Async/Await，可以像编写同步代码一样编写异步代码。
在函数前加上 async 声明，可以使这个函数返回一个 Promise 对象。在异步操作前，使用 await 关键字暂停函数运行，直到异步操作完成。当异步操作完成后，使用 return 语句返回结果。
下面是使用 Async/Await 改写 Promise 的示例：
-- -------------------- ---- -------
----- -------- ------------ -
--- -
----- -------- - ----- -----------
-- -------------- -
----- --- -------------- -------- --- --- -----
-
------ ----------------
- ----- ------- -
----------------------- -------
-
-
---------------------------------------
---------- -- -
----------------------- ------
--
------------ -- -
------------------------ -------
---在这个例子中，getData 函数使用 async 关键字声明为异步函数。在 try 代码块中，我们使用 await 暂停执行直到 fetch 的异步操作完成。如果发生错误，我们会在 catch 代码块中进行处理。
优化代码
使用 Async/Await 和 Promises 可以优化 JavaScript 中的异步编程。它们可以简化代码，使其更易读和易维护，也可以避免回调函数的多层嵌套。下面是一个示例，它使用 Async/Await 和 Promises 获取 GitHub 用户的信息，并将其渲染到网页。
-- -------------------- ---- -------
----- ------- - ----- -------- -- -
--- -
----- --- - -------------------------------------------
----- -------- - ----- -----------
-- -------------- -
----- --- -------------- -------- --- --- -----
-
------ ----- ----------------
- ----- ------- -
----------------------- -------
-
--
----- ---------- - ----- -- -- -
----- ---- - ----- -------------------
----- --- - ------------------------------
------- - ----------------
-------------------------------
----- ---- - -----------------------------
-------------- - ----------
--------------------------------
----- --- - ----------------------------
------------- - ---------
-------------------------------
--
-------------在这个例子中，我们定义了 getUser 函数，它使用 fetch 方法获取 GitHub 用户的信息，并返回解析后的 JSON 数据。然后，我们定义了 renderUser 函数，在该函数中，我们使用 getUser 函数获取用户数据，创建 HTML 元素并将它们附加到网页的 body 元素上。
总结
JavaScript 的异步编程可以让我们在处理 Web 应用中大量数据的过程中更高效、更灵活和更快速地工作。Promise 和 Async/Await 是优化异步编程的关键。在 ECMAScript 2017 中，我们可以使用这些功能来简化代码，减少嵌套层级，从而更轻松地处理异步任务。我希望你可以从这篇文章中了解到关于如何在 ECMAScript 2017 中使用 Async/Await 和 Promises 优化代码的信息，也可以从示例代码中学到写出更好异步代码的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6544a5507d4982a6ebe7d7a6