什么是 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