在前端开发中使用 Promise 作为异步编程的解决方案已经非常普遍了，而在 Promise 中，多个 then 处理函数的执行顺序就显得非常重要。在本文中，我们将深入探讨 Promise 中多个 then 处理函数的执行顺序，以及如何正确使用它们来处理异步逻辑。
Promise 和 then
在介绍 Promise 中多个 then 处理函数的执行顺序之前，我们需要先了解一下 Promise 和 then 方法。Promise 是 JavaScript 中的一种异步编程解决方案，它可以将异步操作转换为同步流程，避免了回调地狱的问题，让代码更加清晰简洁。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败），一旦状态发生改变，就会触发 then 方法。
then 方法是 Promise 的核心方法，主要用于处理异步操作的成功或失败。then 方法接收两个参数：onResolved 和 onRejected，分别表示异步操作成功的回调和失败的回调。当 Promise 的状态从 pending 变为 fulfilled 时，就会触发 onResolved 回调函数；当状态从 pending 变为 rejected 时，就会触发 onRejected 回调函数。
多个 then 处理函数的执行顺序
在 Promise 中，多个 then 处理函数的执行顺序非常重要。因为每次触发 then 方法时，其返回的是一个新的 Promise 对象，这个新的 Promise 对象的状态和返回值都与之前的 Promise 不一定相同。因此，我们必须了解多个 then 处理函数的执行顺序，才能正确的处理异步过程中的逻辑。
同步执行顺序
当多个 then 处理函数按顺序调用时，它们的执行顺序是同步的。即先执行第一个 then 处理函数，再执行第二个 then 处理函数，以此类推。例如：
--- - - --- ----------------- ------- -- - ----------------- ---- ------------- ---- --- -------------- -- - ------------------- ----------------- ---- ---------- -- - ----------------- ---- ---
上面的代码中，Promise 的状态从 pending 变为 fulfilled 时，会触发第一个 then 处理函数，打印出 value 和 'step 3'，然后又返回了一个新的 Promise 对象，继续触发第二个 then 处理函数，打印出 'step 4'。因此，最终的输出结果为：
---- - ---- - ---- - ---- -
异步执行顺序
当多个 then 处理函数中存在异步操作时，它们的执行顺序就不再是同步的了。异步操作会将回调函数加入到事件队列中，等待当前程序执行完毕后再执行。因此，如果一个 Promise 中的 then 处理函数存在异步操作，那么它后面的 then 处理函数可能会先执行。例如：
--- - - --- ----------------- ------- -- -
----------------- ----
------------- -- -
------------- ----
-- ------
---
-------------- -- -
-------------------
----------------- ----
---
--------- -- -
----------------- ----
---上面的代码中，Promise 的状态从 pending 变为 fulfilled 时，会触发第一个 then 处理函数，其中包含一个异步操作（setTimeout），然后又返回了一个新的 Promise 对象，继续触发第二个 then 处理函数。而第二个 then 处理函数也会触发异步操作，其回调函数会被加入到事件队列中等待执行。因此，最终的输出结果为：
---- - ---- - ---- - ---- -
注意事项
在使用 Promise 中的多个 then 处理函数时，需要注意以下几点：
- Promise 的状态只能从 pending 变为 fulfilled 或 rejected 一次，因此 Promise 的 then 处理函数只会被触发一次；
- 如果 then 处理函数中存在异步操作，那么后面的 then 处理函数可能会先执行；
- 如果 then 处理函数中存在返回值，那么该返回值会被作为下一个 then 处理函数的参数；
- 如果 then 处理函数中抛出了异常，那么该异常会被下一个 catch 处理函数捕获，如果没有 catch 处理函数，就会触发全局的 unhandledrejection 事件。
示例代码
下面是一个完整的示例代码，用于演示 Promise 中多个 then 处理函数的执行顺序。
--- - - --- ----------------- ------- -- - ----------------- ---- ------------- ---- --- -------------- -- - ------------------- ----------------- ---- ------ ----- --- --------------- -- - ------------------- ----------------- ---- ----- --- ----------- ---- ---------------- -- - --------------------------- ----------------- ---- ---
上面的代码中，Promise 的状态从 pending 变为 fulfilled 时，会触发第一个 then 处理函数，打印出 value 和 'step 3'，同时返回了一个新的 Promise 对象，继续触发第二个 then 处理函数，打印出 value 和 'step 5'，然后抛出一个异常，被 catch 处理函数捕获，打印出异常信息和 'step 7'。因此，最终的输出结果为：
---- - ---- - ---- - ---- - ---- - ---- - ---- -
结论
在本文中，我们深入探讨了 Promise 中多个 then 处理函数的执行顺序，并给出了相关的示例代码。我们建议在使用 Promise 进行异步编程时，必须正确理解 then 处理函数的执行顺序，避免出现逻辑错误，同时还要注意异常处理和错误捕获。希望本文对大家有所启发，帮助大家在前端开发项目中更加深入地了解 Promise 和 then。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672436722e7021665e12a313