在前端开发中，异步操作是非常常见的场景。而 Promise 的出现在一定程度上解决了异步操作的问题，让程序更加优雅、简洁。在 Promise 中，我们常常会使用 then() 方法和 catch() 方法来处理异步返回的结果和错误，但是它们的执行顺序到底是什么样的呢？本文将详细介绍 Promise 中 then() 方法与 catch() 方法的执行顺序，帮助大家更好地理解 Promise 的使用。
Promise 基础知识
Promise 是一种异步编程解决方案，可以将异步操作封装成一个对象，使得异步操作更加规范、可读性更强。Promise 有三种状态：pending、fulfilled 和 rejected。当 Promise 状态改变时，就会触发 then() 方法或 catch() 方法执行相应的回调函数。
then() 方法的执行顺序
Promise 的 then() 方法可以接受两个参数，分别是成功回调函数和失败回调函数，其中成功回调函数会在 Promise 状态为 fulfilled 时被执行，失败回调函数会在 Promise 状态为 rejected 时被执行。then() 方法的执行顺序如下：
如果 Promise 的状态为 pending，那么 then() 方法会被加入异步队列，等待 Promise 状态改变后执行。
如果 Promise 的状态为 fulfilled，那么 then() 方法的成功回调函数会被立即执行，并且可以接收到 Promise 的返回值。
如果 Promise 的状态为 rejected，那么 then() 方法的失败回调函数会被立即执行，并且可以接收到 Promise 的错误信息。
如果 then() 方法的回调函数中没有返回值，那么下一个 then() 方法的成功回调函数会接收到 undefined。
示例代码如下：
-- -------------------- ---- -------
-- -- ------- ---------
----- ------- - --- ----------------- ------- -- -
--- ---------- - ------
------------- -- -
---------- - -----
-- ------------ -
---------------- -----------
- ---- -
--------------- -----------
-
-- ------
---
-- ------ -------
--------------------- -- -
--------------------
------ ----------
-- ------- -- -
-------------------
------ ---------
---------------- -- -
--------------------
------ ----- ---------
---------------- -- -
--------------------
---上述代码中，我们创建了一个 Promise 对象，模拟了一个异步操作，在 1 秒钟后返回 Promise resolved，并使用 then() 方法处理其返回值。在第一个 then() 方法中，我们将成功回调函数的返回值设置为 success，然后继续使用 then() 方法处理其返回值。在第二个 then() 方法中，我们将返回值设置为 next success，并在控制台中输出了所有的返回值。
执行结果为：
Promise resolved success next success
从执行结果可以看出，Promise 的 then() 方法的执行顺序是按照先后顺序依次执行的，并且每个 then() 方法可以处理前一个 then() 方法的返回值。
catch() 方法的执行顺序
Promise 的 catch() 方法可以接收一个失败回调函数，用于处理 Promise 的错误信息。catch() 方法的执行顺序如下：
如果 Promise 的状态为 pending，那么 catch() 方法会被加入异步队列，等待 Promise 状态改变后执行。
如果 Promise 的状态为 fulfilled，那么 catch() 方法不会执行。
如果 Promise 的状态为 rejected，那么 catch() 方法的回调函数会被立即执行，并且接收到 Promise 的错误信息。
示例代码如下：
-- -------------------- ---- -------
-- -- ------- ---------
----- ------- - --- ----------------- ------- -- -
----- ----- - --- -------------- -----------
------------- -- -
--------------
-- ------
---
-- ------- -------
--------------------- -- -
--------------------
------ ----------
---------------- -- -
---------------------------
------ ---------
---------------- -- -
--------------------
---上述代码中，我们创建了一个 Promise 对象，模拟了一个异步操作，在 1 秒钟后返回错误信息，并使用 catch() 方法处理错误信息。在 catch() 方法中，我们将错误信息输出，并将返回值设置为 failed，然后继续使用 then() 方法处理其返回值。
执行结果为：
Promise rejected failed
从执行结果可以看出，Promise 的 catch() 方法只有在 Promise 的状态为 rejected 时才会执行，并且可以处理 Promise 的错误信息。同时，我们也可以在 catch() 方法中设置返回值，然后继续使用 then() 方法处理。
总结
本文详细介绍了 Promise 中 then() 方法和 catch() 方法的执行顺序，希望能够帮助大家更好地理解 Promise 的使用。在使用 Promise 时，我们需要注意 then() 方法和 catch() 方法的回调函数的执行顺序，以便更好地处理异步返回的结果和错误。同时，我们也可以使用链式调用的形式来简化代码，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518f25395b1f8cacd136314