Promise 中 then 方法内部返回 Promise 的使用技巧

阅读时长 5 分钟读完

Promise 中 then 方法内部返回 Promise 的使用技巧

Promise 是 JavaScript 中常用的异步编程解决方案,它的链式调用非常方便,但我们需要注意的是,在 then 方法中返回一个 Promise 对象时有一些技巧。

一、Promise 链式调用的概念

我们知道,Promise 的 then 方法返回的是一个新的 Promise 对象,所以我们可以实现链式调用。例如:

以上这段代码中,链式调用的第一步 then 方法返回的新的 Promise 对象,可以直接调用它的 then 方法,再返回新的 Promise 对象,以此类推。

二、then 方法内部返回 Promise

当我们在 then 方法内部返回新的 Promise 对象时,我们需要注意以下几点:

  1. 返回的 Promise 对象可能会被穿透。

我们知道,Promise 的 then 方法会自动将值往下传递,所以如果在 then 方法内部返回一个 Promise 对象,且返回的 Promise 对象没有处理成功或失败的回调函数的话,那么当前的 Promise 链就会被穿透,直接跳到下一步 then 方法中。例如:

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

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

以上这段代码中,第一个 then 方法返回了一个新的 Promise 对象,但是返回的 Promise 对象没有处理成功或失败的回调函数,所以该 Promise 链就被穿透了,直接跳到下一步 then 方法中,输出的结果是 2。

如果我们在返回的 Promise 对象中添加回调函数的话,那么就可以顺利的处理当前的 Promise 链。例如:

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

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

以上这段代码中,第二个 then 方法返回的 Promise 对象中添加了一个回调函数,所以可以顺利的处理当前的 Promise 链,输出的结果是 2。

  1. 返回的 Promise 对象可能会影响状态。

如果我们手动将返回的 Promise 对象的状态改为失败,那么当前的 Promise 链也会被改为失败。例如:

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

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

以上这段代码中,第二个 then 方法返回的 Promise 对象中将状态改为失败,所以当前的 Promise 链也被改为失败,输出的结果是 2。

三、结论

在 Promise 的 then 方法中返回 Promise 对象时,我们需要添加回调函数,以处理当前的 Promise 链。同时,我们也需要注意返回的 Promise 对象可能会影响当前 Promise 链的状态。我们需要根据具体的业务需求来决定如何使用 Promise 链。

例子:

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

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

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

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

在上述例子中,我们先定义了两个 Promise,一个成功,一个失败,然后在 Promise1 调用 then 函数中返回 Promise2,当 Promise2 失败时,Promise1.then 的返回 Promise Promise2 就会捕获 Promise2 失败,而后面的 finally 也会被触发。

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

纠错
反馈