JavaScript 异步编程基础 ——Promise

在 JavaScript 中,异步编程是必不可少的。JavaScript 单线程的特点,决定了它必须采用异步编程模型,才能充分利用 CPU 资源,提高程序的响应速度。

Promise 是 JavaScript 异步编程中的一种常用技术,它可以帮助我们更方便地管理异步操作,避免回调地狱,提高代码可读性和可维护性。本文将介绍 Promise 的基础知识,帮助读者快速上手 Promise。

Promise 简介

Promise 是一种异步编程的解决方案,它是对异步操作的一种抽象,用于表示一个异步操作的最终完成(或失败)及其结果值。Promise 对象代表一个异步操作的最终完成状态(成功或失败)和返回的值。

Promise 有三种状态,分别为 pending(进行中)、fulfilled(已完成)和 rejected(已失败)。当 Promise 进入 fulfilled 或 rejected 状态时,称为 Promise 已 settled(已定型)。

Promise 的基本用法如下:

----- ------- - --- ----------------- ------- -- -
  -- ----
  -- ------- --------------
  -- ------- --------------
---

------------------ -- -
  -- --------
-- ------ -- -
  -- --------
---

在 Promise 构造函数中,我们需要传入一个函数,该函数接受两个参数:resolve 和 reject。当异步操作成功时,我们需要调用 resolve 函数,并将结果作为参数传递给它;当异步操作失败时,我们需要调用 reject 函数,并将错误信息作为参数传递给它。

在 then 方法中,我们需要传入两个回调函数,分别代表异步操作成功和失败时的处理逻辑。当异步操作成功时,我们需要在成功的回调函数中获取操作结果;当异步操作失败时,我们需要在失败的回调函数中获取错误信息。

Promise 示例

下面是一个简单的 Promise 示例,用于读取一个文本文件的内容:

----- -- - --------------

-------- ------------------------- -
  ------ --- ----------------- ------- -- -
    --------------------- ------- ----- ----- -- -
      -- ----- -
        ------------
      - ---- -
        --------------
      -
    ---
  ---
-

---------------------------
  ---------- -- -
    ------------------
  --
  ---------- -- -
    -------------------
  ---

在本例中,我们定义了一个 readFilePromise 函数,它返回一个 Promise 对象。在 Promise 构造函数中,我们调用 fs.readFile 函数进行异步读取文件操作。当读取成功时,我们调用 resolve 函数,并将读取到的文件内容作为参数传递给它;当读取失败时,我们调用 reject 函数,并将错误信息作为参数传递给它。

在 then 方法中,我们传入一个回调函数,用于处理读取成功时的逻辑;在 catch 方法中,我们传入一个回调函数,用于处理读取失败时的逻辑。

Promise 链式调用

Promise 还支持链式调用,这种方式可以让代码更简洁、更易读。下面是一个 Promise 链式调用的示例,用于将一个字符串转换为大写、再截取前 5 个字符:

-------- ----------------------- -
  ------ --- ----------------- ------- -- -
    ---------------------------
  ---
-

-------- ------------------ ------ ------- -
  ------ --- ----------------- ------- -- -
    ------------------------- ---------
  ---
-

------------------------- -------
  --------- -- ------------------ -- ---
  --------- -- -
    ----------------- -- -----
  --
  ---------- -- -
    -------------------
  ---

在本例中,我们定义了两个 Promise 函数,分别用于将字符串转换为大写和截取字符串。在 then 方法中,我们将 toUpperCasePromise 和 substrPromise 函数串联起来,通过链式调用来实现字符串转换和截取。当操作成功时,我们在最后一个 then 方法中获取到结果。

Promise.all 和 Promise.race

Promise 还提供了两个常用的方法:Promise.all 和 Promise.race。

Promise.all 方法用于将多个 Promise 对象包装成一个新的 Promise 对象,当所有的 Promise 对象都成功时,该新的 Promise 对象才算成功;当任意一个 Promise 对象失败时,该新的 Promise 对象就失败了。

下面是一个 Promise.all 的示例,用于同时读取多个文件的内容:

----- -- - --------------

-------- ------------------------- -
  ------ --- ----------------- ------- -- -
    --------------------- ------- ----- ----- -- -
      -- ----- -
        ------------
      - ---- -
        --------------
      -
    ---
  ---
-

-------------
  -----------------------------
  -----------------------------
  ----------------------------
--
  ---------- -- -
    ------------------ -- ------- ------ ------
  --
  ---------- -- -
    -------------------
  ---

在本例中,我们使用 Promise.all 方法将三个 readFilePromise 函数包装成一个新的 Promise 对象,当三个函数都成功时,该新的 Promise 对象才算成功,我们在成功的回调函数中获取到三个文件的内容。

Promise.race 方法用于将多个 Promise 对象包装成一个新的 Promise 对象,当任意一个 Promise 对象成功或失败时,该新的 Promise 对象就成功或失败了。

下面是一个 Promise.race 的示例,用于同时请求多个网页,获取响应时间最短的那个网页的内容:

-------- ----------------- -
  ------ --- ----------------- ------- -- -
    ----- --------- - -----------
    ----------
      -------------- -- -
        ----- ------- - -----------
        --------- ---- ----- ------- - ---------- ----- --------------- ---
      --
      ---------- -- -
        ------------
      ---
  ---
-

--------------
  --------------------------------------
  ---------------------------------------
  --------------------------------------
--
  ---------- -- -
    ------------------ -- - ---- ------------------------ ----- ---- ----- ----- -
  --
  ---------- -- -
    -------------------
  ---

在本例中,我们使用 Promise.race 方法将三个 fetchPromise 函数包装成一个新的 Promise 对象,当任意一个函数成功或失败时,该新的 Promise 对象就成功或失败了,我们在成功的回调函数中获取到响应时间最短的那个网页的内容。

Promise 总结

Promise 是 JavaScript 异步编程中的一种常用技术,它可以帮助我们更方便地管理异步操作,避免回调地狱,提高代码可读性和可维护性。本文介绍了 Promise 的基础知识,包括 Promise 的基本用法、Promise 示例、Promise 链式调用、Promise.all 和 Promise.race。希望本文能够帮助读者快速上手 Promise,更好地应用它来解决实际问题。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65e04cbd1886fbafa4d848c3