ECMAScript 2021 中的 Promise 和 Async/Await 详解及 debug 技巧

阅读时长 10 分钟读完

前言

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 技巧。在实际开发中,我们可以根据具体情况选择合适的异步编程方式,提高代码的可读性和可维护性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6796df22504e4ea9bddd329f

纠错
反馈

程序员教程

精选优质教程,助你快速提升技术实力

程序员面试题库

海量优质面试题,助你轻松应对技术面试