Promise 的钩子函数.then/catch/finally 详解

阅读时长 4 分钟读完

Promise 是 JavaScript 中一种处理异步操作的方式,它可以让我们更加优雅和简单地处理异步操作。在 Promise 中,有三个钩子函数:.then.catch.finally,它们分别用于处理 Promise 的成功、失败和结束状态。在本文中,我们将详细讲解这三个钩子函数的用法和意义。

.then

.then 是 Promise 中最常用的钩子函数,它用于处理 Promise 的成功状态。当 Promise 成功时,.then 函数会被调用,并且会接收到成功的结果作为参数。.then 函数可以返回一个新的 Promise,也可以返回任意值。如果返回一个新的 Promise,那么后续的 .then 函数会等待这个新的 Promise 完成后再执行。

下面是一个简单的示例,演示了如何使用 .then 函数:

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

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

在上面的示例中,我们定义了一个 getData 函数,它返回一个 Promise,两秒钟后会成功并返回一个字符串。然后我们使用 .then 函数来处理这个 Promise 的成功状态,当成功时会打印出字符串 "Data Loaded Successfully!"

.catch

.catch 函数用于处理 Promise 的失败状态。如果 Promise 失败了,那么 .catch 函数会被调用,并且会接收到失败的原因作为参数。.catch 函数也可以返回一个新的 Promise,如果返回一个新的 Promise,那么后续的 .then 函数会等待这个新的 Promise 完成后再执行。

下面是一个简单的示例,演示了如何使用 .catch 函数:

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

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

在上面的示例中,我们定义了一个 getData 函数,它返回一个 Promise,两秒钟后会失败并返回一个字符串。然后我们使用 .catch 函数来处理这个 Promise 的失败状态,当失败时会打印出字符串 "Data Load Failed!"

.finally

.finally 函数用于处理 Promise 的结束状态,无论 Promise 成功或失败都会被调用。.finally 函数不接收任何参数,也不会返回任何值,它只是用于在 Promise 结束时执行一些清理工作。

下面是一个简单的示例,演示了如何使用 .finally 函数:

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

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

在上面的示例中,我们定义了一个 getData 函数,它返回一个 Promise,两秒钟后会成功并返回一个字符串。然后我们使用 .finally 函数来处理这个 Promise 的结束状态,无论成功或失败都会打印出字符串 "The Promise Has Ended!"

总结

在本文中,我们详细讲解了 Promise 的三个钩子函数:.then.catch.finally.then 函数用于处理 Promise 的成功状态,.catch 函数用于处理 Promise 的失败状态,.finally 函数用于处理 Promise 的结束状态。这三个钩子函数可以让我们更加优雅和简单地处理异步操作,建议在实际开发中充分利用它们。

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

纠错
反馈