前言
在前端面试中，JavaScript 的异步编程一直是高频考点，而 Promise 作为处理异步操作的核心机制，更是面试官们考察候选人对 JavaScript 运行时理解深度的利器。然而，许多开发者在面对 Promise 相关的代码输出题时，常常因为对事件循环、宏任务、微任务以及 Promise 状态流转的理解不够透彻而掉入"坑"中。😱
JavaScript 事件循环、宏任务与微任务 🔄
要理解 Promise 的执行顺序，首先必须掌握 JavaScript 的事件循环（Event Loop）机制。JavaScript 是一门单线程语言，这意味着它在同一时间只能执行一个任务。然而，为了避免长时间运行的任务阻塞主线程，JavaScript 引入了异步编程的概念，而事件循环正是实现这一机制的核心。
事件循环（Event Loop）
事件循环是一个持续运行的进程，它负责协调同步任务和异步任务的执行。其基本工作原理如下：
-
执行栈（Call Stack）：所有同步任务都在执行栈中按顺序执行。当一个函数被调用时，它会被推入执行栈；当函数执行完毕后，它会从执行栈中弹出。
-
任务队列（Task Queue） ：当异步任务（如
setTimeout、setInterval、I/O 操作等）完成时，它们的回调函数会被放入任务队列中等待执行。任务队列又分为宏任务队列（Macrotask Queue）和微任务队列（Microtask Queue）。 -
事件循环：当执行栈为空时，事件循环会检查任务队列。它会优先从微任务队列中取出所有可执行的微任务并将其推入执行栈执行，直到微任务队列清空。然后，它会从宏任务队列中取出一个宏任务并将其推入执行栈执行。这个过程会不断重复，形成一个循环。
宏任务（Macrotask）与微任务（Microtask）
在 JavaScript 的异步任务中，根据其优先级和执行时机的不同，可以分为宏任务和微任务。理解它们的区别对于预测代码执行顺序至关重要。🧐
宏任务（Macrotask）：
宏任务是较大的任务单元，每次事件循环只会处理一个宏任务。常见的宏任务包括：
setTimeoutsetIntervalsetImmediate(Node.js)- I/O 操作
- UI 渲染
当一个宏任务执行完毕后，事件循环会检查微任务队列。
微任务（Microtask）：
微任务是更小的任务单元，它们在当前宏任务执行完毕后，下一个宏任务开始之前，会立即执行所有排队的微任务。常见的微任务包括：
Promise.then()、Promise.catch()、Promise.finally()process.nextTick(Node.js)MutationObserver
执行顺序总结：
- 执行所有同步代码。
- 执行所有微任务（清空微任务队列）。
- 执行一个宏任务。
- 重复步骤 2 和 3，直到所有任务执行完毕。
这种机制确保了微任务具有更高的优先级，它们会在当前宏任务的末尾被尽快执行，而不会等到下一个宏任务周期。这对于 Promise 的链式调用和状态变化尤为重要。
深入解析 Promise 状态及其流转 🚦
Promise 是 JavaScript 中处理异步操作的对象，它代表了一个异步操作的最终完成（或失败）及其结果值。理解 Promise 的核心在于其三种状态以及这些状态之间的不可逆转的流转。
Promise 的三种状态
一个 Promise 对象在其生命周期中会经历以下三种状态：
-
Pending（待定）：这是 Promise 的初始状态。当 Promise 被创建时，它处于待定状态，表示异步操作正在进行中，尚未完成，也未失败。🤔
-
Fulfilled（已成功）：也称为 Resolved。当异步操作成功完成时，Promise 会从 Pending 状态变为 Fulfilled 状态，并带有一个成功的值（value）。一旦 Promise 变为 Fulfilled 状态，它将永远保持这个状态，并且其值不会再改变。✅
-
Rejected（已失败）：当异步操作失败时，Promise 会从 Pending 状态变为 Rejected 状态，并带有一个失败的原因（reason，通常是一个 Error 对象）。一旦 Promise 变为 Rejected 状态，它也将永远保持这个状态，并且其失败原因不会再改变。❌
状态流转的特性：
- Promise 的状态只能从
Pending变为Fulfilled或Rejected。 - 一旦状态发生改变（从
Pending到Fulfilled或Pending到Rejected），就不能再变回Pending，也不能从Fulfilled变为Rejected，反之亦然。这种特性被称为"状态凝固"。
resolve 和 reject 函数
在 Promise 的构造函数中，我们通常会传入一个执行器函数（executor），这个函数接收两个参数：resolve 和 reject。它们是用于改变 Promise 状态的函数。
resolve(value)：调用resolve函数会将 Promise 的状态从Pending变为Fulfilled，并将value作为成功的结果传递给后续的.then()回调。reject(reason)：调用reject函数会将 Promise 的状态从Pending变为Rejected，并将reason作为失败的原因传递给后续的.catch()或.then()的第二个回调。
重要提示 ：一旦 resolve 或 reject 被调用，Promise 的状态就会被"凝固"。即使在 resolve 或 reject 之后还有其他 resolve 或 reject 的调用，它们也不会生效。
例如，在以下代码中，promise 的状态只会变为 Fulfilled，值为 'success1'，后续的 reject('error') 和 resolve('success2') 都将被忽略：
javascript
const promise = new Promise((resolve, reject) => {
resolve('success1');
reject('error'); // 这行代码不会生效
resolve('success2'); // 这行代码也不会生效
});
promise.then((res) => {
console.log('then:', res); // 输出: then: success1
}).catch((err) => {
console.log('catch:', err); // 不会执行
})then()、catch() 和 finally()
Promise 对象提供了 then()、catch() 和 finally() 方法来注册回调函数，以便在 Promise 状态改变时执行相应的操作。🔗
-
then(onFulfilled, onRejected)：onFulfilled：当 Promise 状态变为Fulfilled时调用的回调函数，接收成功的值作为参数。onRejected：当 Promise 状态变为Rejected时调用的回调函数，接收失败的原因作为参数。then()方法总是返回一个新的 Promise，这使得 Promise 可以进行链式调用。新返回的 Promise 的状态和值取决于onFulfilled或onRejected回调的返回值。
-
catch(onRejected)：catch()方法是then(null, onRejected)的语法糖，专门用于捕获 Promise 链中的错误。它也返回一个新的 Promise。
-
finally(onFinally)：finally()方法在 Promise 无论成功或失败时都会执行其回调函数。它的回调函数不接受任何参数，因为它不关心 Promise 的最终结果。finally()也返回一个新的 Promise，并且会将上一个 Promise 的结果（成功值或失败原因）传递下去，除非finally回调中抛出了新的错误。
理解这些方法以及它们如何与 Promise 状态和事件循环交互，是解决复杂 Promise 输出题的关键。
典型 Promise 代码示例分析 🔍
理论知识是基础，但结合实际代码才能真正理解 Promise 的精髓。下面我们将选取一些具有代表性的代码示例，深入剖析其输出结果背后的原理。💡
示例一：Promise 的同步执行与微任务 🏃♂️
javascript
const promise = new Promise((resolve, reject) => {
console.log(1);
console.log(2);
});
promise.then(() => {
console.log(3);
});
console.log(4);
// 输出结果：
// 1
// 2
// 4解析：
-
new Promise()构造函数中的代码是同步 执行的。因此，console.log(1)和console.log(2)会立即执行，并输出1和2。 -
promise.then()是一个微任务 。然而，在这个例子中，Promise内部的resolve或reject函数都没有被调用，这意味着promise的状态始终保持在pending（待定）状态。只有当Promise的状态从pending变为fulfilled或rejected时，其.then()或.catch()中注册的回调函数才会被推入微任务队列。 -
由于
promise状态未改变，promise.then(() => { console.log(3); })中的回调函数永远不会被执行，因此3不会输出。 -
console.log(4)是同步代码，在Promise构造函数执行完毕后立即执行，输出4。
这个例子强调了 Promise 构造函数是同步执行的，以及 then 回调的执行依赖于 Promise 状态的改变。🎯
示例二：宏任务与微任务的交织 🚦
javascript
const promise = new Promise((resolve, reject) => {
console.log(1);
setTimeout(() => {
console.log("timerStart");
resolve("success");
console.log("timerEnd");
}, 0);
console.log(2);
});
promise.then((res) => {
console.log(res);
});
console.log(4);
// 输出结果：
// 1
// 2
// 4
// timerStart
// timerEnd
// success解析：
-
new Promise()构造函数中的代码同步执行，首先输出1。 -
遇到
setTimeout，这是一个宏任务。它的回调函数被放入宏任务队列，等待当前宏任务（整个 script）执行完毕后，且微任务队列清空后才会被执行。 -
console.log(2)紧接着同步执行，输出2。 -
此时
promise的状态仍为pending，promise.then()中的回调函数不会立即执行，但它作为一个微任务被注册，等待promise状态变为fulfilled或rejected。 -
console.log(4)同步执行，输出4。 -
至此，第一轮事件循环的同步代码执行完毕，微任务队列为空（因为
promise尚未resolve）。 -
事件循环开始执行宏任务队列中的第一个宏任务，即
setTimeout的回调函数。 -
setTimeout回调函数开始执行：console.log("timerStart")输出timerStart。resolve("success")被调用，将promise的状态从pending变为fulfilled，并将"success"作为结果。此时，之前注册的promise.then()回调被推入微任务队列。console.log("timerEnd")输出timerEnd。
-
setTimeout宏任务执行完毕。事件循环检查微任务队列，发现promise.then()的回调。执行该回调，输出res的值，即success。🎉
这个例子清晰地展示了宏任务和微任务的执行时机：同步代码优先，然后是微任务，最后是宏任务。
示例三：Promise 状态的不可逆性 🧊
javascript
const promise = new Promise((resolve, reject) => {
resolve("success1");
reject("error");
resolve("success2");
});
promise.then((res) => {
console.log("then:", res);
}).catch((err) => {
console.log("catch:", err);
})
// 输出结果：
// then: success1解析：
new Promise()构造函数中的代码同步执行。resolve("success1")被调用，将promise的状态从pending变为fulfilled，并将其值设置为"success1"。一旦 Promise 的状态改变，它就凝固了，不能再改变。- 随后的
reject("error")和resolve("success2")都不会对promise的状态产生任何影响，因为promise已经处于fulfilled状态。 - 因此，只有
promise.then()中的onFulfilled回调会被执行，输出"then: success1"，而catch回调不会被触发。
这个例子是理解 Promise "状态凝固"特性的关键。一旦 Promise 状态确定，后续的 resolve 或 reject 调用都将被忽略。🙅♀
示例四：then 方法的参数透传 👻
javascript
Promise.resolve(1)
.then(2)
.then(Promise.resolve(3))
.then(console.log)
// 输出结果：
// 1解析：
这个例子考察的是 Promise.prototype.then() 方法的参数处理机制。then 方法期望接收函数作为参数（onFulfilled 和 onRejected）。如果传入的不是函数，那么它会发生"值透传"（value pass-through）。
-
Promise.resolve(1)创建一个状态为fulfilled且值为1的 Promise。 -
第一个
.then(2)：2不是一个函数。根据规范，如果then的参数不是函数，它会被忽略，上一个 Promise 的结果会直接传递给下一个then。所以，1会透传到下一个then。 -
第二个
.then(Promise.resolve(3))：Promise.resolve(3)也不是一个函数，而是一个 Promise 对象。同样，1会继续透传到下一个then。 -
第三个
.then(console.log)：console.log是一个函数。它接收透传过来的值1作为参数并执行，因此最终输出1。
这个例子提醒我们，then 方法的参数必须是函数才能捕获或处理 Promise 的结果。非函数参数会导致值的直接传递。⚠️
示例五：async/await 与事件循环 🚀
javascript
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
async function async2() {
console.log("async2");
}
async1();
console.log("start")
// 输出结果：
// async1 start
// async2
// start
// async1 end解析：
async/await 是 ES2017 引入的异步编程语法糖🍬，它基于 Promise 实现，使得异步代码看起来更像同步代码。
-
async1()被调用，首先执行同步代码console.log("async1 start")，输出"async1 start"。 -
遇到
await async2()：async2()函数立即执行，其内部的同步代码console.log("async2")立即执行，输出"async2"。await关键字会"暂停"async1函数的执行，直到async2返回的 Promise 解决（或拒绝）。await后面的代码（console.log("async1 end")）会被放入微任务队列，等待当前宏任务执行完毕且微任务队列清空后，再被执行。
-
async1函数被暂停后，主线程继续执行其后的同步代码console.log("start")，输出"start"。 -
至此，第一轮事件循环的同步代码执行完毕。
-
事件循环检查微任务队列，发现
async1中await后面的代码（console.log("async1 end")）作为微任务存在。执行该微任务，输出"async1 end"。
这个例子揭示了 await 的本质：它会将 await 后面的代码视为一个微任务，从而确保了 await 后的代码在当前宏任务和所有已排队的微任务执行完毕后才执行。💡
示例六：Promise.all 与 Promise.race 🏁
javascript
function runAsync (x) {
const p = new Promise(r => setTimeout(() => r(x, console.log(x)), 1000))
return p
}
Promise.all([runAsync(1), runAsync(2), runAsync(3)]).then(res => console.log(res))
// 输出结果：
// 1 (约1秒后)
// 2 (约1秒后)
// 3 (约1秒后)
// [1, 2, 3] (约1秒后)
// ----------------------------------------------------------------------------------
function runReject (x) {
const p = new Promise((res, rej) => setTimeout(() => rej(`Error: ${x}`, console.log(x)), 1000 * x))
return p
}
Promise.all([runAsync(1), runReject(4), runAsync(3), runReject(2)])
.then(res => console.log(res))
.catch(err => console.log(err))
// 输出结果：
// 1 (约1秒后)
// 3 (约1秒后)
// 2 (约2秒后)
// Error: 2 (约2秒后)
// 4 (约4秒后)
// ----------------------------------------------------------------------------------
Promise.race([runAsync(1), runAsync(2), runAsync(3)])
.then(res => console.log("result: ", res))
.catch(err => console.log(err))
// 输出结果：
// 1 (约1秒后)
// result: 1 (约1秒后)
// 2 (约1秒后)
// 3 (约1秒后)
// ----------------------------------------------------------------------------------
Promise.race([runReject(0), runAsync(1), runAsync(2), runAsync(3)])
.then(res => console.log("result: ", res))
.catch(err => console.log(err));
// 输出结果：
// 0 (立即)
// Error: 0 (立即)
// 1 (约1秒后)
// 2 (约1秒后)
// 3 (约1秒后)解析：
-
Promise.all(iterable)：- 接收一个 Promise 实例的数组作为参数。
- 当所有 Promise 都
fulfilled时，Promise.all返回一个新的 Promise，其状态为fulfilled，并且其结果是一个数组，包含所有 Promise 的成功值，顺序与传入的 Promise 顺序一致。 - 只要有一个 Promise 被
rejected，Promise.all就会立即返回一个新的 Promise，其状态为rejected，并且其结果是第一个被rejected的 Promise 的原因。即使有 Promise 失败，其他 Promise 仍然会继续执行，只是Promise.all不再等待它们的结果。 - 在第二个
Promise.all示例中，runReject(2)会在 2 秒后失败，runReject(4)会在 4 秒后失败。Promise.all会在runReject(2)失败时立即捕获错误并输出Error: 2，但runReject(4)仍然会继续执行并输出4。
-
Promise.race(iterable)：- 接收一个 Promise 实例的数组作为参数。
- 只要有一个 Promise 率先
fulfilled或rejected，Promise.race就会立即返回一个新的 Promise，其状态和结果与率先完成的 Promise 相同。其他 Promise 仍然会继续执行，但它们的结果不会影响Promise.race的最终结果。 - 在第一个
Promise.race示例中，runAsync(1)、runAsync(2)、runAsync(3)几乎同时开始，但runAsync(1)率先fulfilled，因此Promise.race立即返回1。其他 Promise 仍然会执行并输出2和3。 - 在第二个
Promise.race示例中，runReject(0)立即rejected，因此Promise.race立即捕获错误并输出Error: 0。其他 Promise 仍然会执行并输出1、2、3。
Promise.all 和 Promise.race 是处理多个并发异步操作的强大工具，理解它们的行为对于编写高效且健壮的异步代码至关重要。
示例七：finally 的特性 🧹
javascript
Promise.resolve("1")
.then(res => {
console.log(res)
})
.finally(() => {
console.log("finally")
})
Promise.resolve("2")
.finally(() => {
console.log("finally2")
return "我是finally2返回的值"
})
.then(res => {
console.log("finally2后面的then函数", res)
})
// 输出结果：
// 1
// finally2
// finally
// finally2后面的then函数 2解析：
finally() 方法在 Promise 无论成功或失败时都会执行其回调函数，但它有一些特殊的行为：
- 不接受参数 ：
finally的回调函数不接受任何参数，因为它不关心 Promise 的最终结果。 - 值透传 ：
finally方法返回的 Promise 会将上一个 Promise 的结果（成功值或失败原因）传递下去，除非finally回调中抛出了新的错误。- 在第一个 Promise 链中，
Promise.resolve("1")之后then打印1，然后finally打印"finally"。由于finally没有返回值，下一个then接收到的值仍然是上一个then的返回值（如果上一个then有返回值的话，否则是undefined）。 - 在第二个 Promise 链中，
Promise.resolve("2")之后finally打印"finally2"。尽管finally回调中return "我是finally2返回的值"，但这个返回值会被忽略，finally仍然会将上一个 Promise 的值"2"传递给下一个then，所以最终finally2后面的then函数打印2。
- 在第一个 Promise 链中，
- 错误捕获 ：如果
finally回调中抛出错误，那么这个错误会被后续的catch捕获，并且会覆盖掉上一个 Promise 的结果。
finally 主要用于执行一些清理工作，例如关闭数据库连接、停止加载动画等，而不影响 Promise 链中的数据流。✨
总结与避免常见陷阱 🚧
通过上述典型示例的分析，我们可以总结出在 Promise 相关的代码输出题中常见的"坑"以及如何避免它们：
-
Promise 构造函数是同步执行的：
- 陷阱 ：误以为
new Promise()内部的代码是异步的，导致对同步输出的判断失误。 - 避免 ：始终记住
Promise构造函数中的执行器函数会立即执行，其中的同步代码会阻塞主线程。
- 陷阱 ：误以为
-
Promise 状态的不可逆性（状态凝固）：
- 陷阱 ：在
resolve或reject之后，继续尝试改变 Promise 的状态，导致预期外的行为。 - 避免 ：一旦
resolve或reject被调用，Promise 的状态就确定了，后续的resolve或reject调用都将被忽略。确保只调用一次resolve或reject。
- 陷阱 ：在
-
宏任务与微任务的执行顺序：
- 陷阱 ：混淆宏任务（如
setTimeout）和微任务（如Promise.then）的执行优先级，导致输出顺序错误。 - 避免：牢记事件循环的优先级：同步代码 > 微任务 > 宏任务。在一个宏任务执行完毕后，会清空所有微任务队列，然后才执行下一个宏任务。
- 陷阱 ：混淆宏任务（如
-
then方法的参数透传：- 陷阱 ：向
then方法传入非函数参数，导致 Promise 的值意外地透传到后续的then链中。 - 避免 ：确保
then方法的参数是函数。如果不需要处理当前 Promise 的结果，但又想继续链式调用，可以传入null或undefined，或者直接省略参数，让值自然透传。
- 陷阱 ：向
-
async/await的本质：- 陷阱 ：将
await后的代码误认为同步执行，或不理解await如何影响事件循环。 - 避免 ：
await会暂停async函数的执行，并将await后面的代码作为微任务推入队列。理解async/await是基于 Promise 和微任务的语法糖。
- 陷阱 ：将
-
Promise.all和Promise.race的错误处理：- 陷阱 ：不清楚
Promise.all在遇到错误时是否会停止其他 Promise 的执行，或者Promise.race如何处理率先失败的情况。 - 避免 ：
Promise.all只要有一个 Promise 失败就会立即rejected，但其他 Promise 仍会继续执行。Promise.race只要有一个 Promise 率先fulfilled或rejected就会立即返回结果，其他 Promise 仍会继续执行。
- 陷阱 ：不清楚
-
finally的行为：- 陷阱 ：误以为
finally的返回值会影响 Promise 链的后续结果，或者期望finally回调能接收到 Promise 的结果。 - 避免 ：
finally的回调不接受参数，其返回值通常会被忽略，Promise 链会继续传递上一个 Promise 的结果，除非finally中抛出新的错误。
- 陷阱 ：误以为
掌握这些核心概念和常见陷阱，将大大提升你对 JavaScript 异步编程的理解，让你在面对 Promise 相关的面试题时游刃有余。💪
结语 🎉
Promise 是现代 JavaScript 异步编程不可或缺的一部分。深入理解其背后的事件循环机制、宏任务与微任务的调度、Promise 的状态流转以及 async/await 的工作原理，不仅能帮助你轻松应对面试中的各种挑战，更能让你在实际开发中写出更健壮、更高效的异步代码。