在 JavaScript 中，异步编程是一个关键的话题。在用户界面、服务器端和各种应用程序中，我们经常需要执行一些长时间运行的操作，如数据提取、I/O 操作、网络请求等，这些操作都需要在异步模式下进行。
之前，我们使用回调函数来处理异步代码。但是，回调函数嵌套的问题使得代码难以维护和理解。于是，Promise 出现了，它将异步操作封装在 Promise 对象中，使得代码更加易读和易写。
最近，async/await 是另一种处理异步编程的方式。它建立在 Promise 基础上，提供了一种更加直观的方式来处理异步代码。
接下来，我们将深入剖析 Promise 和 async/await，看看它们各自的优缺点以及它们是如何在实际项目中使用的。
Promise
Promise 是一种解决 JavaScript 异步编程的方法。它包装异步操作并返回一个 Promise 对象，它会在异步操作结束时返回成功或失败的信息。
Promise 有三种状态：
- pending（等待态），异步操作尚未完成；
- fulfilled（完成态），异步操作成功完成；
- rejected（拒绝态），异步操作失败完成。
以下是一个使用 Promise 的例子：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
----- ---- - ------- ----------
--------------
-- ------
---
-
----------------------- -- -------------------在这个例子中，我们定义了一个函数 fetchData()，这个函数返回一个 Promise 对象，在 Promise 对象完成后，调用 then 方法，打印返回的数据。
Promise 的优点是它创建了一个清晰的工作流，并将异步操作和它的结果包装在一起。它使代码更易于阅读和debug，因为每个异步操作都是一个单独的 Promise 对象。但是，使用 Promise 依然会产生回调嵌套（称为 “回调地狱”），因为我们需要使用 .then() 操作解决异步操作的结果。
-- -------------------- ---- -------
-----------
------------ -- -
------------------
------ -------------
--
------------- -- -
-------------------
------ -------------
--
------------- -- -
-------------------
---async/await
async/await 是一个基于 Promise 的异步处理方案。它是 es2017 中的一个新的特性，使得异步代码非常易读和易写。
使用 async/await，我们可以将异步代码看作是同步代码。我们只需要在前面加上 async 标记来表示这是一个异步函数，await 可以等待异步函数完成并返回结果。以下是一个 async/await 的例子：
-- -------------------- ---- -------
----- -------- ----------- -
----- ---- - ----- -------------------
------------------
-
-------- ------------------ -
------ --- ----------------- ------- -- -
------------- -- -
----- ---- - ------- --------------
--------------
-- ------
---
-
------------在这个例子中，我们定义了一个 fetchDataPromise() 来返回一个 Promise 对象，在 fetchData() 函数前面添加了 async 标志，使其成为一个异步函数。我们使用 await 等待 fetchDataPromise() 异步操作完成并返回结果，然后打印返回的数据。
async/await 的优点是它提供了一个更直观的方式来处理异步代码，使代码看起来更像同步代码。此外，async/await 消除了回调嵌套，使代码更加清晰易懂。
-- -------------------- ---- ------- ----- -------- ----------- - ----- ----- - ----- -------------------- ------------------- ----- ----- - ----- -------------------- ------------------- ----- ----- - ----- -------------------- ------------------- - ------------
Promise vs async/await
Promise 和 async/await 均被广泛使用。但是，它们各自有不同的特点和用法。
Promise 提供了一种可组合性的方法，解决了 JavaScript 异步编程的低效问题。但是，Promise 代码通常需要使用回调函数使其正确工作，这种 “回调地狱” 代码的结构不易于阅读和维护。
async/await 看起来更像同步代码，并提供了一个明确的控制流程，但是它增加了代码的复杂性，因为它添加了额外的语法。此外，async/await 不是完全无阻塞的，如果异步请求的数量很多，它可能会影响性能。
综合考虑，使用 Promise 或 async/await 取决于您的项目需求和团队的偏好。在某些情况下，Promise 可能更适合，而在其他情况下，async/await 可能更适合。
结论
在 JavaScript 中，异步编程是很重要的。Promise 和 async/await 是两种处理异步代码的方法。每个技术都有其优缺点，需要根据项目需求和团队偏好来选择合适的方法来处理异步代码。
无论你选择哪种方法，保持代码易读易写，防止回调嵌套或深层嵌套函数，是处理异步编程的关键。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671f7ea52e7021665efde101