在前端开发中，常常需要进行异步操作。Promise 是一种十分常用的异步编程方法之一。在 Promise 中，then 和 catch 是最常见的两个方法，用于处理 Promise 对象中成功和失败的状态，具体的使用方法和注意事项为我们设计异步代码提供了指导。
Promise 的 then 方法
Promise 的 then 方法是用于定义 Promise 成功后的回调函数。该方法接受两个参数，第一个参数是成功的回调函数，第二个参数是失败的回调函数。其中，成功的回调函数将会接收 Promise 的 resolve 值，失败的回调函数将会接收 Promise 的 reject 值。
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
----- ------ - ------------- - ---
-- ------- - -- -
---------- ---------- ------ -- --- ---------
- ---- -
------------- -- -
------------ ------ -- ------------
-- ------
-
---
-------
------------- -- -
-------------------
--
-------------- -- -
---------------------
---在上面的代码中，我们创建了一个 Promise 对象，该 Promise 对象在生成的随机数小于 5 时将会 reject，否则将会在 1 秒后 resolve。通过 then 方法和 catch 方法，我们可以在 Promise 对象变为成功或失败状态时执行相应的回调函数。
Promise 的 catch 方法
Promise 的 catch 方法是用于捕捉 Promise 对象的错误。如果 Promise 对象的状态变为了失败状态，那么该方法会接收到 Promise 的 reject 值。另外，catch 方法也可以在 then 方法后面使用，以便在 then 方法中某个回调函数抛出了异常时兜底捕捉。
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
----- ------ - ------------- - ---
-- ------- - -- -
---------- ---------- ------ -- --- ---------
- ---- -
------------- -- -
------------ ------ -- ------------
-- ------
-
---
-------------------- -- -
-------------------
----- --- --------- ----- -----------
---------------- -- -
---------------------
---在上面的代码中，当执行 then方法中的回调函数时，我们手动抛出了一个异常。由于 catch 方法是 then 方法的兜底捕捉方法，因此在异常抛出后，该方法会接收到异常对象并打印出来。
纵观 Promise 和 then/catch 方法
通过学习 Promise 中 then 和 catch 方法的使用，我们可以发现其具有以下优点：
- 更加直观：then 和 catch 方法可以更明显地反映出函数的执行流程，易于阅读代码。
- 更加灵活：then 和 catch 方法可以设置多个回调函数，以便进行更复杂的异步操作。
- 更加统一性: then 和 catch 方法的设计规范标准，可以让我们在不同的代码环境中使用相同的处理方式。
同时，这些方法也存在一些需要特别注意的细节：
- catch 后继 needthen: catch 方法只有在 then 方法后出现才能被正确地捕捉到异常，否则会被直接抛出。
- 链式调用: then 方法是可以进行链式调用的，每次 then 方法执行之后，都会返回一个新的 Promise 对象，从而明确地展示出函数间的关系。
- 传递参数: then 方法中的回调函数可以返回一个值或 Promise 对象，并把这个值传递给下一个 then 方法。
总结
通过本文的学习，我们对 Promise 中的 then 和 catch 方法有了更详细的了解。在实际开发中，我们可以结合 Promise 和这两种方法，进行正确地异步编程，提高代码的性能和可读性，从而达到更好的开发效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f727e980a9b385b8ef85e