在前端开发中，我们经常会使用 Promise 来处理异步操作。而在 Promise 中，catch 和 then 是两个常用的方法，它们的作用都是用于处理 Promise 的状态变化。但是，catch 和 then 的使用场景和处理方式是有所不同的。本文将详细介绍 catch 和 then 的差别，并给出最佳实践和示例代码。
catch 和 then 的作用
Promise 的状态有三种：pending、fulfilled 和 rejected。当 Promise 的状态从 pending 变为 fulfilled 或 rejected 时，就会触发 then 或 catch 方法。
then 方法的作用是处理 Promise 状态从 pending 变为 fulfilled 的情况，catch 方法的作用是处理 Promise 状态从 pending 变为 rejected 的情况。
catch 和 then 的差别
1. 错误处理方式不同
then 方法处理 Promise 状态变化时，如果出现异常错误，会被抛出并中断 Promise 链，而 catch 方法则会捕获异常错误并继续 Promise 链的执行。
示例代码：
-- -------------------- ---- -------
-----------------
-------- -- -
----- --- ------------ -- ---- --------
--
-------- -- -
----------------- ---- ---- --- -- ----------
--
------------ -- -
-------------------- -- ------ ----- -- ---- ------
--在上面的代码中，第一个 then 方法中抛出了一个异常错误，由于该异常错误未被捕获，Promise 链被中断，第二个 then 方法不会执行。而如果我们使用 catch 方法处理错误，就可以继续 Promise 链的执行：
-- -------------------- ---- -------
-----------------
-------- -- -
----- --- ------------ -- ---- --------
--
------------ -- -
-------------------- -- ------ ----- -- ---- ------
------ ------ --------
--
---------- -- -
----------------- -- ----- -------
--在上面的代码中，我们使用 catch 方法捕获了异常错误，并返回了一个值，Promise 链继续执行，后续的 then 方法输出了我们返回的值。
2. then 方法可以链式调用多个
在 Promise 中，then 方法可以链式调用多个，每个 then 方法都可以对 Promise 状态变化做出处理。而 catch 方法只能在 Promise 链的最后一位进行调用。
示例代码：
-- -------------------- ---- -------
-----------------
-------- -- -
------------------ ------
------ ------ -----
--
---------- -- -
------------------- ----- ---------
------ ------- -----
--
---------- -- -
------------------ ----- ---------
------ ------ -----
--
------------ -- -
--------------------
--在上面的代码中，我们调用了三个 then 方法，每个 then 方法都输出了一个值。如果出现异常错误，我们使用 catch 方法处理错误。由于 catch 方法只能在 Promise 链的最后一位进行调用，所以我们需要将 catch 放在最后一位。
最佳实践
1. 尽可能使用 catch 方法处理异常错误
在处理 Promise 状态变化时，尽可能使用 catch 方法处理异常错误，以确保 Promise 链的执行不被中断。
2. 对于多个 then 方法的处理，使用链式调用
对于多个 then 方法的处理，使用链式调用，以保证代码的可读性和可维护性。
3. 使用 async/await 简化 Promise 的处理
async/await 是 ES2017 新增的语法，可以更简洁地处理 Promise 的状态变化。使用 async/await 可以使代码更易读、易懂，减少出错的可能性。
示例代码：
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- ------- - ----- -------------------
----- ------- - ----- ---------------------------------
------ -------
- ----- ------- -
--------------------
-
-在上面的代码中，我们使用 async/await 简化了 Promise 的处理，代码更易读、易懂。
总结
在 Promise 中，catch 和 then 方法都是用于处理 Promise 状态变化的。它们的作用和处理方式是有所不同的。最佳实践是尽可能使用 catch 方法处理异常错误，对于多个 then 方法的处理，使用链式调用，使用 async/await 简化 Promise 的处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664088d3d3423812e4ea8c35