Promise 中 then 和 catch 的区别及使用时注意事项

阅读时长 4 分钟读完

什么是 Promise?

Promise 是一种异步编程的解决方案,它是一个对象,代表某个未来才会知道结果的事件(通常是异步操作)的最终完成或失败。

Promise 有三种状态:

  • pending:初始状态,既不是成功也不是失败状态。
  • fulfilled:意味着操作成功完成。
  • rejected:意味着操作失败。

then 方法

Promise 的 then 方法用于指定操作成功时的回调函数。它接受一个函数作为参数,当 Promise 状态变为 fulfilled 特定值时,就会调用这个函数。

例如,下面的示例代码展示了 fetch 请求成功后使用 then 方法获取响应体的 JSON 数据:

在上面的代码中,第一个 then 方法在成功时调用 response.json() 方法,将响应体转换为 JSON。第二个 then 方法是在第一个 then 方法的基础上运行的,它接收 JSON 数据并将其传递给 console.log() 方法。

catch 方法

Promise 的 catch 方法用于指定操作失败时的回调函数。它接收一个函数作为参数,当 Promise 状态变为 rejected 时,就会调用这个函数。

例如,下面的示例代码展示了一个 getJSON 函数,它使用 fetch 执行 HTTP GET 请求并返回 JSON 数据。如果请求失败,则调用 catch 方法:

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

在上面的代码中,如果 fetch 请求失败(即 HTTP 状态代码不是 200),则会抛出一个错误并调用 catch 方法。

then 和 catch 的区别及使用时注意事项

Promise 的 then 方法和 catch 方法都返回一个新的 Promise,这意味着它们可以链接在一起。这意味着你可以使用多个 then 方法来指定一系列成功时的回调函数,或使用 catch 方法指定一系列操作失败时的回调函数。

下面是 then 和 catch 方法的区别及使用时的注意事项:

  • then 方法只捕获 Promise 实例中的 resolved 状态,而 catch 方法只捕获 Promise 实例中的 rejected 状态。
  • 在一个 Promise 实例中,then 和 catch 方法只能被调用一次。多次调用将会产生不可预知的错误。
  • 必须使用 catch 方法来捕获错误,否则错误会被默默地忽略。如果在操作中发生错误而没有捕获它,则接下来的操作将不会执行。
  • then 方法可以链式调用,它的返回结果(新的 Promise 实例)可以传递给下一个 then 方法。链式调用使你可以将处理分散到多个部分。
  • 如果在 then 方法中返回的值不是 Promise,则会将其包装在 Promise 中并传递给下一个 then 方法。如果返回的值是 Promise,则会等待它解决并传递其解决值到下一个 then 方法。下面是一个示例代码:
-- -------------------- ---- -------
---------------------------------------------------
  -------------- -- -
    ------ --- ----------------- ------- -- -
      ------------- -- -
        -------------------------
      -- ------
    ---
  --
  ---------- -- -------------------

在上面的代码中,第一个 then 方法将 JSON 响应传递给新的 Promise,该 Promise 将在 1 秒后解决。

总结

本文介绍了 Promise 中 then 和 catch 的区别及使用时的注意事项。then 方法用于指定操作成功时的回调函数,catch 方法用于指定操作失败时的回调函数。注意事项包括必须使用 catch 方法来捕获错误,然后方法可以链式调用等。在实际开发中,我们应该根据具体情况合理使用 then 和 catch 方法。

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

纠错
反馈