背景
前端开发中，异步操作的需求越来越常见。而在 JavaScript 中，Promise 是一种用于异步编程的语法，它允许我们以一种更加优雅和精确的方式来处理异步操作，有助于避免回调地狱的问题。 Promise 对象的状态至少有以下三种变化，分别是：pending（等待状态）、fulfilled（成功状态）和 rejected（失败状态）。
当 Promise 对象从 pending 状态转变为 resolved 状态后，会自动调用 then() 方法。如果 Promise 对象从 pending 状态转变为 rejected 状态，则会自动调用 catch() 方法。此外，then() 方法还可以链式调用，用于处理多个异步请求，这里咱们主要讲述原本一个then() 方法和一个 catch() 方法是如何串联执行的。
Promise.then() 和 Promise.catch() 的执行顺序
当 Promise 对象的状态由 pending 转变为 fulfilled 时，then() 方法会被自动执行，如果在 then() 方法中抛出了异常，或者 then() 方法返回的是一个 rejected 状态的 Promise 对象，那么 catch() 方法就会被自动执行。以下是一个简单的示例：
--- ------- - --- ----------------- ------- -- -
-- -------- -- ------------ ---------
------------- -- -
------------------ -----------
-- ------
---
--------------------- -- -
-------------------- ----------- --------
----- --- ----------- -- -- --------- -------- -- ------ ----------
---------------- -- -
--------------------- ------ -- -- --------- -------- -- ------ -------
---总结
在使用 Promise 进行异步操作的开发中，我们需要了解 Promise.then() 和 Promise.catch() 的执行顺序，这有助于我们在编写代码时正确的处理异步操作。当 Promise 对象的状态从 pending 转变为 fulfilled 时，会自动调用 then() 方法，如果在 then() 方法中抛出了异常，或者 then() 方法返回的是一个 rejected 状态的 Promise 对象，那么 catch() 方法就会被自动执行。因此，在编写 then() 和 catch() 方法时，我们需要非常小心和仔细，避免抛出异常和返回 rejected 状态的 Promise 对象。
上面示例代码展示了then() 方法中抛出异常和返回失败状态的 Promise 对象都会执行catch() 方法的情况。最后看到通常的回调地狱是这样的：
--------
---- ------
-------- -------- -------- -
--------
---- ------
-------- -------- -------- -
--------
---- ------
-------- -------- -------- -
-- ---
--
------ -------- ----- -
-----------------
-
---
--
------ -------- ----- -
-----------------
-
---
--
------ -------- ----- -
-----------------
-
---而 Promise 可以通过链式调用避免这个问题，这样代码会更加优雅，也会更加可读。
--- ----------------- ------- -- -
------
---- ------
------- ------
-------- -------- -------- -
----------------
--
------ -------- ----- -
------------
--
---
--
----------- -- -
-- ---
------ --- ----------------- ------- -- -
------
---- ------
------- ------
-------- -------- -------- -
----------------
--
------ -------- ----- -
------------
--
---
---
--
----------- -- -
-- ---
------ --- ----------------- ------- -- -
------
---- ------
------- ------
-------- -------- -------- -
----------------
--
------ -------- ----- -
------------
--
---
---
--
------------ -- -
-----------------
---指导意义
了解 Promise.then() 和 Promise.catch() 的执行顺序，以及 Promise 中 then() 方法的链式调用，能够帮助我们更加深入的理解 Promise 的运行机制，为我们更加快速高效地开发和维护异步代码提供便利。同时通过避免回调地狱等问题，使得代码的可读性更强，让我们专注于业务逻辑的实现，提升开发效率和代码质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65a32b61add4f0e0ffb45dfb