在前端开发中，我们经常会用到 Promise 来处理异步操作。Promise 中的 then 方法可以添加一个或多个回调函数，这些回调函数会在 Promise 对象状态发生改变时被调用。但是当我们多次调用 then 方法时，回调函数的执行顺序会变得比较复杂。本文将对 Promise.then 多次调用时的执行顺序进行分析。
Promise.then 的基本使用
在开始分析 Promise.then 的执行顺序之前，我们先来了解一下 Promise.then 的基本使用。
-- -------------------- ---- ------- ----- ---------------- - -- -- --- ----------------- ------- -- - -- ---- ------------ ------- ------------------- --- -- -------- ------------------------------ -- - -------------------- --- -- -------- ------------------------------ -- - -------------------- ---------- -- - ------------------- ---------- -- - ------------------- ---
以上代码中，promisedFunction 返回一个 Promise 对象，我们使用 then 方法来添加回调函数。当 Promise 对象状态改变时，回调函数就会被异步执行。
可以看到，then 方法可以添加多个回调函数。在 Promise 对象状态发生改变时，这些回调函数会按照添加顺序顺序执行。
Promise.then 的链式调用
then 方法返回的是一个新的 Promise 对象，因此可以使用链式调用来添加回调函数。在链式调用中，回调函数会依次执行，并依次取得上一个回调函数的返回值。下面是一个简单的例子：
-- -------------------- ---- ------- ------------------------------ -- - -------------------- ------ ------ -------------- -- - -------------------- ------ ------ -------------- -- - -------------------- ---
在上述代码中，每个回调函数都返回一个值，这个值会作为下一个回调函数的参数。因此，第一个回调函数返回的是 'foo'，第二个回调函数的参数就是 'foo'，以此类推。
Promise.then 多次调用的执行顺序
现在我们来探讨一下当多次调用 then 方法时，回调函数的执行顺序是怎样的。考虑以下代码：
-- -------------------- ---- ------- -------------------------- -- - --------------------- ---------- -- - ---------------------- --- -------------------------- -- - --------------------- ---------- -- - ---------------------- ---
在上述代码中，我们调用了两次 promisedFunction，并且每次都添加了两个回调函数。那么这些回调函数会按照怎样的顺序执行呢？
首先，第一个 Promise 对象的状态变为 resolved 时，将会执行第一个回调函数，输出 "first"，然后执行第二个回调函数，输出 "second"。
然后，第二个 Promise 对象的状态变为 resolved 时，将会执行第一个回调函数，输出 "third"，然后执行第二个回调函数，输出 "fourth"。
因此，这些回调函数会按照 Promise 对象的产生顺序依次执行。
Promise.then 异步执行回调函数
需要注意的是，回调函数是异步执行的。也就是说，当 Promise 对象的状态发生改变时，回调函数不会立即执行，而是被放入事件队列中，等待 JavaScript 引擎执行完当前代码块之后再执行。
考虑下面的代码：
promisedFunction().then(() => {
console.log('first');
});
console.log('second');输出结果为：
second first
这是因为第一个回调函数是异步执行的，执行时间不确定，因此先输出 "second"，再输出 "first"。
总结
本文分析了 Promise.then 多次调用时的执行顺序，并讨论了回调函数异步执行的问题。要注意的是，回调函数的执行顺序与 Promise 对象的产生顺序有关，而回调函数的执行是异步的，需要等待 JavaScript 引擎执行完当前代码块之后再执行。正确理解 Promise.then 的执行顺序可以帮助我们更好地处理异步操作，提高代码质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6476cd86968c7c53b03708b3