前言
Promise 和 Async/Await 是 JavaScript 中异步编程的两种主要方式。在 ECMAScript 2021 中，Promise 和 Async/Await 得到了进一步的优化和改进。本文将详细介绍 Promise 和 Async/Await 的使用方法、新特性以及 debug 技巧，帮助读者更好地理解和应用这两种异步编程方式。
Promise
Promise 的基本使用
Promise 是一种异步编程的解决方案，它可以让我们更方便地处理异步操作。Promise 有三种状态：pending、fulfilled 和 rejected。当 Promise 的状态从 pending 转变为 fulfilled 或 rejected 时，就会触发 then() 方法或 catch() 方法。
下面是一个简单的 Promise 示例：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
------------- -- -
--------------- -----------
-- ------
---
-------
-------------- -- -
-------------------- -- ------- ---------
--
-------------- -- -
-------------------
---在这个示例中，我们创建了一个 Promise 对象并在其中执行了一个异步操作。当异步操作完成后，我们调用了 resolve() 方法并传递了一个字符串参数。然后我们通过 then() 方法来处理 Promise 的成功状态，并输出了 resolve() 方法中传递的字符串。
Promise.all() 和 Promise.race()
Promise.all() 方法可以接受一个 Promise 数组作为参数，当所有 Promise 都成功完成时，它会返回一个包含所有 Promise 结果的数组。如果其中任何一个 Promise 失败，它就会返回一个 rejected 的 Promise。
下面是一个使用 Promise.all() 方法的示例：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- ----
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- ----
-- ------
---
---------------------- ----------
--------------- -- -
--------------------- -- --------- --- -------- ---
--
-------------- -- -
-------------------
---Promise.race() 方法可以接受一个 Promise 数组作为参数，它会返回一个 Promise，该 Promise 的状态和第一个完成的 Promise 的状态相同。
下面是一个使用 Promise.race() 方法的示例：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- ----
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- ----
-- ------
---
----------------------- ----------
-------------- -- -
-------------------- -- -------- --
--
-------------- -- -
-------------------
---Promise 新特性
在 ECMAScript 2021 中，Promise 新增了两个方法：Promise.any() 和 Promise.allSettled()。
Promise.any() 方法可以接受一个 Promise 数组作为参数，它会返回一个 Promise，该 Promise 的状态和第一个成功的 Promise 的状态相同。如果所有 Promise 都失败了，它就会返回一个 rejected 的 Promise。
下面是一个使用 Promise.any() 方法的示例：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------- - -----------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- ----
-- ------
---
---------------------- ----------
-------------- -- -
-------------------- -- -------- --
--
-------------- -- -
------------------- -- --------------- --- -------- ---- --------
---Promise.allSettled() 方法可以接受一个 Promise 数组作为参数，它会返回一个 Promise，该 Promise 的状态总是 fulfilled。它会返回一个包含所有 Promise 结果的数组，无论 Promise 是否成功都会包含在内。
下面是一个使用 Promise.allSettled() 方法的示例：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------- - -----------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- ----
-- ------
---
----------------------------- ----------
--------------- -- -
---------------------
-- -
-- - ------- ----------- ------- -------- - --------- --
-- - ------- ------------ ------ -------- -- -
-- -
--
-------------- -- -
-------------------
---Async/Await
Async/Await 的基本使用
Async/Await 是在 Promise 基础上进一步封装的异步编程方式。它可以让我们更方便地编写异步代码，并且代码可读性更高。
下面是一个简单的 Async/Await 示例：
-- -------------------- ---- -------
----- -------- ----------- -
----- -------- - ----- -------------------------------------
----- ---- - ----- ----------------
------ -----
-
-----------
------------ -- -
------------------
--
-------------- -- -
-------------------
---在这个示例中，我们定义了一个 fetchData() 函数，它使用 async 关键字声明为异步函数。在函数中，我们使用 await 关键字来等待异步操作的完成。在这个示例中，我们等待 fetch() 方法的返回结果，并使用 await 关键字等待 response.json() 方法的返回结果。
Async/Await 的错误处理
在 Async/Await 中，我们可以使用 try/catch 语句来处理异步操作中的错误。
下面是一个 Async/Await 错误处理的示例：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- -------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
-------------------
-
-
------------在这个示例中，我们使用 try/catch 语句来捕获 fetchData() 函数中的错误。如果 fetch() 方法或 response.json() 方法中发生了错误，它们就会抛出一个异常并被 catch 语句捕获。
Async/Await 的并行执行
在 Async/Await 中，我们可以使用 Promise.all() 方法来并行执行多个异步操作。
下面是一个 Async/Await 并行执行的示例：
-- -------------------- ---- -------
----- -------- ----------- -
----- ---------- --------- - ----- -------------
-------------------------------------
------------------------------------
---
----- ------------ - ----- ----------------
----- ------------ - ----- ----------------
------ -
----- -------------
----- ------------
--
-
-----------
------------ -- -
------------------
--
-------------- -- -
-------------------
---在这个示例中，我们使用 Promise.all() 方法并行执行了两个异步操作。当两个异步操作都完成后，我们使用 await 关键字分别等待了它们的结果。
Debug 技巧
在开发过程中，我们可能会遇到一些异步操作中的错误。为了更好地 debug 异步代码，我们可以使用 Chrome DevTools 中的 Async Stack Traces 功能。
Async Stack Traces 可以显示异步操作的完整调用栈，帮助我们更好地理解异步代码的执行流程。
下面是一个使用 Async Stack Traces 的示例：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- -------------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
-------------------
-
-
------------在这个示例中，我们使用了 try/catch 语句来处理异步操作中的错误。如果发生了错误，我们会在控制台中输出错误信息。
如果我们想要更好地 debug 异步代码，我们可以在 Chrome DevTools 中打开 Async Stack Traces 功能。在 Sources 面板中，我们可以勾选 Async 来显示异步操作的完整调用栈。
结语
Promise 和 Async/Await 是 JavaScript 中异步编程的两种主要方式。在 ECMAScript 2021 中，Promise 和 Async/Await 得到了进一步的优化和改进。通过本文的介绍，相信读者已经掌握了 Promise 和 Async/Await 的使用方法、新特性以及 debug 技巧。在实际开发中，我们可以根据具体情况选择合适的异步编程方式，提高代码的可读性和可维护性。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6796df22504e4ea9bddd329f