JS 中的 Promise 对象详解

阅读时长 5 分钟读完

前言

在 JavaScript 中,异步编程是非常常见的,比如调用后端接口、读取文件等等。传统的异步编程方式是使用回调函数,但是随着项目规模的增大,回调地狱的问题也越来越严重,代码的可读性和可维护性也越来越差。为了解决这个问题,ES6 引入了 Promise 对象。

Promise 对象的基本概念

Promise 对象是 JavaScript 中表示异步操作的最终完成或失败的对象。它有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。当 Promise 对象的状态从 pending 转变为 fulfilled 或 rejected,就称为 Promise 对象被“解决(settled)”了。

Promise 对象有两个重要的方法:then() 和 catch()。then() 方法用于指定 Promise 对象的成功状态和失败状态的回调函数,catch() 方法用于指定 Promise 对象的失败状态的回调函数。

Promise 对象的基本用法

下面是 Promise 对象的基本用法:

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

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

上面代码中,Promise 对象的构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 和 reject。resolve 函数用于将 Promise 对象的状态从 pending 改为 fulfilled,并指定异步操作的结果;reject 函数用于将 Promise 对象的状态从 pending 改为 rejected,并指定异步操作的错误信息。

then() 方法用于指定 Promise 对象的成功状态的回调函数,catch() 方法用于指定 Promise 对象的失败状态的回调函数。如果 Promise 对象的状态已经变为 fulfilled,then() 方法指定的回调函数会立即执行;如果 Promise 对象的状态已经变为 rejected,catch() 方法指定的回调函数会立即执行。

Promise 对象的链式调用

Promise 对象支持链式调用,这是 Promise 对象的重要特性。下面是 Promise 对象的链式调用的基本用法:

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

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

上面代码中,第一个 then() 方法的回调函数返回了一个新的 Promise 对象,第二个 then() 方法的回调函数就是该新的 Promise 对象的成功状态的回调函数。如果第一个异步操作失败,catch() 方法的回调函数就会执行。

Promise 对象的进阶用法

Promise.all()

Promise.all() 方法用于将多个 Promise 对象包装成一个新的 Promise 对象,所有的 Promise 对象都成功时,该新的 Promise 对象的状态才会变为 fulfilled,其中任意一个 Promise 对象失败时,该新的 Promise 对象的状态就会变为 rejected。

下面是 Promise.all() 方法的基本用法:

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

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

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

Promise.race()

Promise.race() 方法用于将多个 Promise 对象包装成一个新的 Promise 对象,其中任意一个 Promise 对象成功或失败时,该新的 Promise 对象的状态就会变为相应的状态。

下面是 Promise.race() 方法的基本用法:

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

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

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

总结

Promise 对象是 JavaScript 中表示异步操作的最终完成或失败的对象,它有三种状态:pending、fulfilled 和 rejected。Promise 对象有两个重要的方法:then() 和 catch(),用于指定 Promise 对象的成功状态和失败状态的回调函数。Promise 对象支持链式调用和进阶用法,如 Promise.all() 和 Promise.race()。使用 Promise 对象可以避免回调地狱的问题,提高代码的可读性和可维护性。

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

纠错
反馈