在前端开发中，我们常常需要使用 Promise 来处理异步代码。Promise 为我们提供了一种非常便捷的方式来统一处理异步操作，比如进行连续的异步请求，保证后续操作的依赖得到满足等。
然而，在使用 Promise 过程中，我们可能会遇到 then 方法的多次调用及顺序问题，如果不处理好这些问题，就有可能导致代码出现不稳定或错误的结果。本文将以此为例，带您深入了解 Promise 中 then 方法的一些特性及如何避免出现问题。
then 方法基础
首先，我们需要了解下 Promise 中的 then 方法，它的作用是在 Promise 完成后，执行指定的回调函数。
let promise = new Promise(function(resolve, reject) {
setTimeout(() => resolve('Done!'), 1000);
});
promise.then(function(result) {
console.log(result);
});上面的代码中，我们定义了一个 Promise，它将在 1 秒后返回值 'Done!'，接着使用 then 方法注册了一个回调函数，当 Promise 完成后，这个回调函数会被调用，输出结果为 'Done!'。
如果 then 方法注册的回调函数返回值是一个 Promise，则会将这个 Promise 作为当前 Promise 的返回值。此时，在返回的 Promise 执行完成后，才会继续执行后续的 then 方法。
-- -------------------- ---- ------- --- ------- - --- ------------------------- ------- - ------------- -- ----------------- ------ --- ----------------------------- - ------ --- --------------- -- ------------- -- ---------------- ------- ------------------------ - -------------------- ---
上面的代码中，我们返回了一个 Promise 对象，它将在 1 秒后返回值 result，而这个 Promise 会作为第一个 Promise 的返回值。在第二个 then 方法中，我们直接输出了这个返回值 result，它将在第一个 Promise 完成后，再次等待 1 秒后输出。
then 方法多次调用
当我们多次调用 Promise 的 then 方法时，每个 then 方法注册的回调函数都将被调用，它们的执行顺序取决于 Promise 状态的变化，同时后面的 then 方法可能会影响前面 then 方法的执行结果。
-- -------------------- ---- ------- --- ------- - --- ------------------------- ------- - ------------- -- ----------- ------ --- ----------------------------- - --------------------- -------- ------ ------ - -- ------------------------ - ---------------------- -------- ------ ------ - -- ------------------------ - --------------------- -------- ------------------------ - ---------------------- -------- --- -- ------ - -- ------- - -- ------ - -- ------- ---------
上面的代码中，我们分别注册了四个 then 方法，它们的执行顺序依次为 First -> Second -> Third -> Fourth，其中第一个 then 方法的回调函数返回值是 result * 2，后续的 then 方法都是以此值为基础进行下一步操作。
需要注意的是，then 方法注册的回调函数不一定是同步执行的，它们可能会被放到一个异步队列中去执行，这就会导致后续的 then 方法可能会比前面的 then 方法先执行。
-- -------------------- ---- ------- --- ------- - --- ------------------------- ------- - ------------- -- ----------- ------ --- ----------------------------- - --------------------- -------- ------------- -- ----------------------- -------- --- ------ ------ - -- ------------------------ - ---------------------- -------- ------ ------ - -- ------------------------ - --------------------- -------- ------------------------ - ---------------------- -------- --- -- ------ - -- ------- - -- -------- - -- ------ - -- ------- ---------
上面的代码中，我们在第一个 then 方法中，注册了一个异步调用 setTimeout 的回调函数，该回调函数会在后续的 then 方法前执行，并输出 'Timeout: 1'。
处理多次调用问题
为了防止多次调用 then 方法导致的问题，我们可以在 then 方法中返回一个新的 Promise 对象，通过这个 Promise 的 resolve 或 reject 方法，来通知后续链式调用中应该执行哪个回调函数。
-- -------------------- ---- ------- --- ------- - --- ------------------------- ------- - ------------- -- ----------- ------ --- ----------------------------- - --------------------- -------- ------ --- --------------- -- -------------- - ---- ------------------------ - ---------------------- -------- ------ --- --------------- -- -------------- - ---- ------------------------ - --------------------- -------- ------------------------ - ---------------------- -------- --- -- ------ - -- ------- - -- ------ - -- ------- ---------
上面的代码中，我们在每个 then 方法中都返回了一个新的 Promise，这样就可以在后续的 then 方法中，用这个 Promise 的 resolve 或 reject 方法，来控制执行哪个回调函数。
另外，为了避免出现回调地狱，我们还可以使用 async/await 来简化 Promise 的调用方式。
-- -------------------- ---- ------- ----- -------- -------------- - --- ------ - ----- --- --------------- -- ------------- -- ----------- ------- --------------------- -------- ------ - ------ - -- ---------------------- -------- ------ - ------ - -- --------------------- -------- - --------------- -- ------ - -- ------- - -- ------ -
上面的代码中，我们使用了 async/await 来简化了 Promise 的调用方式，避免了回调嵌套的问题。
结论
Promise 为我们提供了一种非常便捷的方式来进行异步编程，同时 then 方法的链式调用，让我们能够更加灵活的控制异步操作的执行方式。然而，多次调用 then 方法时，有可能会导致代码出现不稳定或错误的结果。因此，我们需要仔细处理 then 方法的多次调用及顺序问题，以充分发挥 Promise 的特性。
建议在 then 方法中返回新的 Promise 对象，避免出现多次调用问题。另外，使用 async/await 可以进一步简化 Promise 的调用方式，避免回调地狱的出现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a20ded91dce0dc87f0009