Promise与事件循环详解

你在学习文章相关的知识吗？本文《Promise与事件循环深度解析》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

Promise与事件循环的交互机制核心在于宏任务与微任务的执行顺序。1. JavaScript事件循环先执行一个宏任务；2. 宏任务执行完毕后，立即清空所有微任务队列；3. 微任务如Promise的.then()、.catch()、.finally()回调优先于下一个宏任务执行。这种机制确保Promise回调在当前宏任务结束后尽快执行，甚至快于setTimeout(0)。例如，同步代码和Promise.then()在同一个宏任务中时，Promise回调会被延迟到当前宏任务结束后作为微任务执行，而setTimeout的回调作为宏任务需等待微任务队列清空后才执行。Promise链式调用中，每个.then()返回的新Promise回调也按序加入微任务队列，保证异步流程顺序执行。async/await本质上是Promise的语法糖，await暂停async函数执行并将后续代码作为微任务调度，行为与.then()一致，仅在语法和流程控制上更直观。

Promise与事件循环的交互机制，说白了，就是JavaScript运行时如何决定什么时候去执行那些Promise的.then()、.catch()或.finally()回调。核心在于，Promise的回调被归类为“微任务”（Microtask），而像setTimeout、setInterval这类则属于“宏任务”（Macrotask）。事件循环在处理上有一个明确的优先级：它会先执行一个宏任务（比如一段脚本），然后立即清空所有待处理的微任务队列，接着才进入下一个宏任务的执行。这意味着，Promise的回调总是会在当前宏任务执行完毕后、下一个宏任务开始前，优先得到执行。

解决方案

理解Promise与事件循环的交互，关键在于把握宏任务与微任务的执行顺序。JavaScript的事件循环是一个持续不断的过程，它不断地从任务队列中取出任务来执行。

1. 宏任务队列（Macrotask Queue）：这是主线任务的队列。常见的宏任务包括：

   
   • 整个脚本的执行（initial script execution）
   • setTimeout() 和 setInterval() 的回调
   • I/O 操作（如网络请求完成的回调）
   • UI 渲染事件
   • requestAnimationFrame (通常被认为是宏任务，或至少是与渲染紧密相关的)

2. 微任务队列（Microtask Queue）：这是一个优先级更高的队列。常见的微任务包括：

   • Promise 的 .then()、.catch()、.finally() 回调
   • MutationObserver 的回调
   • Node.js 环境下的 process.nextTick()

执行机制是这样的： 当事件循环开始时，它会从宏任务队列中取出一个任务来执行。这个任务执行完毕后，在进入下一个宏任务之前，事件循环会检查微任务队列。如果微任务队列中有任务，它会一次性地、全部地执行完所有微任务，直到微任务队列清空。只有当微任务队列清空后，事件循环才会去宏任务队列中取出下一个宏任务来执行。

所以，当你创建一个Promise并调用.then()时，这个回调并不会立即执行，而是被放入微任务队列。一旦当前正在执行的宏任务完成，它就会被迅速处理掉，甚至比setTimeout(0)的回调还要快。这种机制保证了Promise的回调能在一个相对确定的时间点被处理，并且通常比其他异步操作更快地响应。

举个例子，我们来看这段代码：

console.log('Start');

Promise.resolve().then(() => {
    console.log('Promise resolved (Microtask)');
});

setTimeout(() => {
    console.log('Timeout (Macrotask)');
}, 0);

console.log('End');

这段代码的输出会是：

Start
End
Promise resolved (Microtask)
Timeout (Macrotask)

这清晰地展示了微任务的优先级。console.log('Start')和console.log('End')是主脚本执行的一部分，属于当前宏任务。Promise的.then()回调被推入微任务队列，setTimeout的回调被推入宏任务队列。当主脚本宏任务执行完毕，事件循环会优先清空微任务队列，所以Promise resolved先于Timeout打印。

为什么Promise的回调执行速度似乎总是比setTimeout快？

这个问题其实是很多初学者都会碰到的一个疑惑点，因为它打破了我们对“异步”的直观理解，总觉得setTimeout(0)应该立刻执行啊。但实际上，这正是微任务和宏任务优先级差异的直接体现。

简单来说，当一个Promise被解决（resolved）或拒绝（rejected）后，它所关联的.then()、.catch()或.finally()回调函数并不会立即执行，而是被悄悄地送入一个叫做“微任务队列”的地方。而setTimeout(0)的回调，虽然延迟时间是0，但它仍然被送入了“宏任务队列”。

事件循环在每个宏任务执行完毕后，会有一个“清算”阶段。在这个阶段，它会马不停蹄地检查微任务队列，并把里面所有的任务都执行掉，一个不留，直到队列完全清空。只有当微任务队列空了之后，事件循环才会去宏任务队列里找下一个任务来执行。

所以，无论你setTimeout设置的延迟是0毫秒还是一千毫秒，只要当前有一个宏任务正在执行（比如我们的主脚本），并且这个宏任务中触发了Promise的回解决，那么Promise的回调（微任务）总会在当前宏任务结束后，立即被执行，而setTimeout的回调（下一个宏任务）则要等到微任务队列清空后才能轮到。

我们再来看一个更直观的例子：

console.log('A');

setTimeout(() => {
    console.log('B');
}, 0);

new Promise(resolve => {
    console.log('C');
    resolve();
}).then(() => {
    console.log('D');
});

console.log('E');

你猜这段代码的输出顺序是什么？ 正确答案是：

A
C
E
D
B

解释一下：

1. console.log('A')：立即执行，打印 A。
2. setTimeout(() => { console.log('B'); }, 0)：B被放入宏任务队列。
3. new Promise(...)：Promise的构造函数是同步执行的，所以console.log('C')立即执行，打印 C。然后resolve()被调用，D被放入微任务队列。
4. console.log('E')：立即执行，打印 E。
5. 至此，当前宏任务（主脚本）执行完毕。事件循环检查微任务队列，发现有D，于是执行，打印 D。
6. 微任务队列清空。事件循环检查宏任务队列，发现有B，于是执行，打印 B。

这就是为什么Promise的回调“看起来”总是比setTimeout快的原因，它不是速度上的快，而是执行优先级上的高。

链式调用Promise时，事件循环如何处理？

Promise的链式调用（.then().then()）是其强大之处，它让异步操作的序列化变得非常优雅。在事件循环中，链式调用会稍微复杂一点，但核心原则依然是微任务优先。

当你执行promise.then(callback1).then(callback2)时，每个.then()方法都会返回一个新的Promise。这个新的Promise的状态，取决于callback1的返回值。

具体来说：

1. 当promise解决时，callback1会被放入微任务队列。
2. 当事件循环执行到callback1时，callback1执行。
   • 如果callback1返回一个普通值（非Promise），那么它返回的这个值会立即用来解决callback1返回的新Promise。这个新Promise的.then()回调（即callback2）会立即被放入当前的微任务队列的末尾。
   • 如果callback1返回一个Promise（比如return new Promise(...)），那么callback2并不会立即被放入微任务队列。callback2会等待callback1返回的那个Promise解决后，才会被放入微任务队列。

这种机制保证了即使是深度嵌套的Promise链，其回调的执行依然是在微任务队列中进行，并且遵循严格的顺序。

我们来看一个例子：

console.log('Start Chain');

Promise.resolve('Step 1')
    .then(value => {
        console.log(value); // Output: Step 1
        return 'Step 2';
    })
    .then(value => {
        console.log(value); // Output: Step 2
        return Promise.resolve('Step 3 (Nested Promise)');
    })
    .then(value => {
        console.log(value); // Output: Step 3 (Nested Promise)
    });

console.log('End Chain');

输出顺序：

Start Chain
End Chain
Step 1
Step 2
Step 3 (Nested Promise)

分析：

1. console.log('Start Chain')和console.log('End Chain')作为主脚本的一部分，同步执行。
2. Promise.resolve('Step 1')立即解决，其第一个.then()回调被放入微任务队列。
3. 主脚本执行完毕。事件循环清空微任务队列。
4. 第一个.then()回调执行，打印“Step 1”，并返回“Step 2”。因为返回的是普通值，第二个.then()的回调（打印“Step 2”的部分）被立即放入当前微任务队列的末尾。
5. 微任务队列继续执行，第二个.then()回调执行，打印“Step 2”，并返回一个已解决的Promise（Promise.resolve('Step 3 (Nested Promise)')）。因为返回的是Promise，第三个.then()的回调（打印“Step 3 (Nested Promise)”的部分）会等待这个内部Promise解决后，才被放入微任务队列。由于这个内部Promise是立即解决的，所以它也几乎是立即被放入微任务队列的。
6. 微任务队列继续执行，第三个.then()回调执行，打印“Step 3 (Nested Promise)”。
7. 微任务队列清空。

这说明，Promise链中的每一个.then()，其回调的调度都发生在微任务层面。如果一个.then()回调返回一个非Promise值，那么下一个.then()的回调会立刻被安排到当前微任务队列的末尾。如果返回的是一个Promise，那么下一个.then()的回调会等待那个返回的Promise解决后，再被安排到微任务队列。这种设计确保了Promise链的执行顺序和预期行为。

Promise与async/await在事件循环中的行为有何异同？

async/await是ES2017引入的语法糖，它让基于Promise的异步代码写起来更像是同步代码，大大提升了可读性和可维护性。然而，从事件循环的角度来看，async/await的底层机制仍然是Promise，所以它们在事件循环中的行为有很多相似之处，但也存在一些微妙的差异。

核心相同点： 无论你用Promise.then()还是async/await，它们最终都依赖于微任务队列来调度异步操作的后续执行。当一个async函数执行到await关键字时，如果await的表达式是一个Promise，那么async函数的执行就会被“暂停”，并且它后续的代码（await之后的代码）会被封装成一个回调，等待被await的Promise解决。一旦这个Promise解决，被封装的后续代码就会被放入微任务队列。

关键不同点：

1. 语法与流程控制：

   • Promise.then()：通过链式回调来处理异步结果，可能导致回调地狱（callback hell），错误处理也需要通过.catch()单独处理。
   • async/await：使得异步代码看起来像同步代码，可以使用try...catch结构来捕获异步操作中的错误，流程控制更加直观。await会暂停async函数的执行，直到它等待的Promise解决。

2. 执行机制的“暂停”：

   • 当async函数遇到await时，它会交出控制权给事件循环。这意味着，await之后的代码不会立即执行，而是等待await的Promise解决。一旦Promise解决，await之后的代码就会被作为微任务放入队列，等待当前宏任务执行完毕后被执行。
   • 而纯粹的Promise.then()链，虽然也是微任务，但它不会“暂停”当前函数的执行，而是通过注册新的回调来推进流程。

我们来看一个对比的例子，来感受它们在事件循环中的行为差异：

// async/await 示例
async function asyncFunc() {
    console.log('AsyncFunc - Before await');
    await Promise.resolve('Resolved by await'); // 这里会暂停并调度后续为微任务
    console.log('AsyncFunc - After await');
}

console.log('Global - Start');
asyncFunc();
console.log('Global - End');

// 对应的 Promise.then() 示例（逻辑模拟）
console.log('Global - Start (Promise Sim)');
new Promise(resolve => {
    console.log('PromiseSim - Before then (asyncFunc part 1)');
    resolve('Resolved by Promise Sim');
}).then(() => {
    console.log('PromiseSim - After then (asyncFunc part 2)');
});
console.log('Global - End (Promise Sim)');

输出分析：

对于 async/await 示例：

Global - Start
AsyncFunc - Before await
Global - End
AsyncFunc - After await

1. console.log('Global - Start') 同步执行。
2. asyncFunc() 被调用。
3. console.log('AsyncFunc - Before await') 同步执行。
4. 遇到 await Promise.resolve('Resolved by await')。asyncFunc 暂停执行，await 后面的代码被封装成一个微任务。Promise.resolve() 立即解决，所以这个微任务被立即放入微任务队列。
5. asyncFunc 暂停后，控制权返回给全局代码，console.log('Global - End') 同步执行。
6. 当前宏任务（全局脚本）执行完毕。事件循环清空微任务队列，执行 asyncFunc 中被暂停的微任务，即 console.log('AsyncFunc - After await')。

对于 Promise.then() 示例（模拟 async/await 内部行为）：

Global - Start (Promise Sim)
PromiseSim - Before then (asyncFunc part 1)
Global - End (Promise Sim)
PromiseSim - After then (asyncFunc part 2)

你会发现，它们的输出顺序是完全一致的。这印证了async/await本质上是Promise的语法糖，它在事件循环中的调度机制与直接使用Promise是相同的：await之后的代码，如果它等待的Promise解决了，就会被作为微任务调度执行。

总结来说，async/await并没有改变事件循环的底层机制，它只是提供了一种更直观、更易读的方式来编写异步代码，其异步行为的调度依然是基于Promise和微任务队列的优先级规则。理解这一点，对于掌握JavaScript的并发模型至关重要。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~