在前端开发中，Promise 是一种非常常见的异步编程方式，它可以有效地解决回调嵌套的问题，使代码更加易读易维护。Promise 中的 then() 方法可以用于对异步操作的结果进行处理，但是在某些情况下，多个 then() 方法可能会同时执行，这就需要我们对 Promise 的工作原理有一个清晰的认识。
Promise 的工作原理
在 Promise 中，then() 方法用于对异步操作的结果进行处理。当异步操作执行完毕时，会调用 then() 方法，并把异步操作的结果作为参数传入 then() 方法。then() 方法返回一个新的 Promise 对象，可以通过链式调用 then() 方法，实现对异步操作的连续处理。
例如：
-------- ------------- -- -
------ --- ----------------- ------- -- -
------------- -- -
--------------- --------
-- -----
--
-
---------------
------------ -- -
-------------------
------ --------------------
--
----------------- -- -
------------------------
--在上面的例子中，asyncFunction() 是一个异步函数，返回一个 Promise 对象。在调用 then() 方法时，会将 asyncFunction() 返回的结果作为参数传入第一个 then() 方法中，并返回一个新的 Promise 对象。第二个 then() 方法接收第一个 then() 方法返回的结果，实现对结果的处理。
多个 then() 方法的执行顺序
如果对 Promise 还不太熟悉的话，在了解多个 then() 方法的执行顺序之前，需要先明确 Promise 的工作原理。Promise 中的 then() 方法返回一个新的 Promise 对象，可以通过链式调用 then() 方法，实现对异步操作的连续处理。
但是需要注意的是，Promise 中的 then() 方法并不是同时执行的，而是按照顺序依次执行的。当一个 Promise 对象的 then() 方法返回一个新的 Promise 对象时，下一个 then() 方法会等待新的 Promise 对象的状态发生改变之后再执行。
例如：
-------- ------------- -- -
------ --- ----------------- ------- -- -
------------- -- -
--------------- --------
-- -----
--
-
---------------
------------ -- -
-------------------
------ --- ----------------- ------- -- -
------------- -- -
-----------------------------
-- -----
--
--
----------------- -- -
------------------------
------ --- ----------------- ------- -- -
------------- -- -
-------------------------------------------------
-- -----
--
--
-------------------- -- -
---------------------------
--在上面的例子中，asyncFunction() 是一个异步函数，返回一个 Promise 对象。在第一个 then() 方法中，返回一个新的 Promise 对象，在新的 Promise 对象的回调函数中设置了一个定时器，模拟异步操作的延迟。第二个 then() 方法也返回了一个新的 Promise 对象，同样设置了一个定时器，模拟异步操作的延迟。第三个 then() 方法同样返回了一个新的 Promise 对象。
在这个例子中，每一个 then() 方法的执行都受到上一个 Promise 对象状态的影响。第一个 then() 方法返回的 Promise 对象的状态发生改变之后，第二个 then() 方法才会开始执行；第二个 then() 方法返回的 Promise 对象的状态发生改变之后，第三个 then() 方法才会开始执行。
多个 then() 方法同时执行的方法
虽然 Promise 中的 then() 方法并不是同时执行的，但是我们可以在 then() 方法中使用 Promise.all() 方法将多个异步操作合并成一个 Promise 对象，从而实现多个 then() 方法同时执行的效果。
例如：
-------- ------ -- -
------ --- ----------------- ------- -- -
------------- -- -
--------------- --
-- -----
--
-
-------- ------ -- -
------ --- ----------------- ------- -- -
------------- -- -
-----------------
-- -----
--
-
---------------------- ----------
------------- -- -
---------------------- - -----------
--在上面的例子中，async1 和 async2 都是异步函数，返回一个 Promise 对象。在调用 Promise.all() 方法时，将 async1 和 async2 返回的 Promise 对象作为参数传入，返回一个新的 Promise 对象。在这个新的 Promise 对象的回调函数中，使用了数组的解构赋值，获取了 async1 和 async2 返回的结果，并进行了拼接。
结论
在 Promise 中，then() 方法是按照顺序依次执行的。当一个 Promise 对象的 then() 方法返回一个新的 Promise 对象时，下一个 then() 方法会等待新的 Promise 对象的状态发生改变之后再执行。如果需要实现多个 then() 方法同时执行的效果，可以在 then() 方法中使用 Promise.all() 方法将多个异步操作合并成一个 Promise 对象。
了解 Promise 的工作原理对于前端开发者来说非常重要，可以让我们更加清晰地理解代码的执行顺序，更加高效地处理异步操作。希望本文对您的学习有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67297a412e7021665e249f25