Promise 异步执行顺序探究：揭开 JavaScript 谜团

2024-01-26 13:30:41







在 JavaScript 中，Promise 作为一种异步编程范式，允许我们在异步操作完成后执行回调函数。这为代码带来了更清晰的结构和可读性，使得异步编程更加容易管理。然而，当涉及到 Promise 的异步执行顺序时，往往会让开发人员感到困惑。本文将深入探究 Promise 的异步执行机制，揭开其工作原理、常见问题和最佳实践，帮助您掌握异步编程的奥秘，提升代码的可读性和可维护性。

## Promise 的异步执行机制

Promise 本身并不是一种新的异步编程技术，它只是对回调函数的一种封装，但它巧妙地利用了 JavaScript 的事件循环机制，使得异步编程更加容易管理。在 JavaScript 中，事件循环负责处理所有异步任务，包括网络请求、定时器、事件处理等。当这些任务完成后，事件循环会将它们放入一个队列中，然后依次执行这些任务。

Promise 的异步执行与事件循环密切相关。当我们调用 Promise 的 `then()` 方法时，它会将一个回调函数添加到事件循环的队列中。当 Promise 的状态发生改变时，例如从 `pending` 状态变为 `resolved` 或 `rejected` 状态，事件循环就会从队列中取出相应的回调函数并执行它。

## Promise 异步执行顺序的谜团

在理解了 Promise 的异步执行机制之后，我们来看一个经典的 Promise 异步执行顺序问题：

```javascript
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise1');
    resolve();
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('promise2');
    resolve();
  }, 2000);
});

promise1.then(() => {
  console.log('then11');
});

promise2.then(() => {
  console.log('then21');
});

promise1.then(() => {
  console.log('then12');
});

promise2.then(() => {
  console.log('then23');
});

在这个代码片段中，我们创建了两个 Promise，promise1 和 promise2。然后我们调用 then() 方法为每个 Promise 添加回调函数。我们期望的执行顺序是：

promise1
then11
promise2
then21
then12
then23

然而，实际的执行顺序却是：

promise1
then11
promise2
then21
then12
then23

这与我们的预期不符，为什么会出现这样的情况呢？

揭开谜团

为了揭开这个谜团，我们需要深入理解 JavaScript 的事件循环机制。当我们在浏览器中运行 JavaScript 代码时，浏览器会创建一个主线程和一个事件队列。主线程负责执行所有同步任务，而事件队列负责存储所有异步任务。当主线程空闲时，它会从事件队列中取出任务并执行它们。

在上面的代码片段中，promise1 和 promise2 都是异步任务，它们被放入事件队列中等待执行。当主线程执行到 promise1.then() 和 promise2.then() 时，它会将这两个回调函数也放入事件队列中。

此时，事件队列中的任务执行顺序如下：

promise1
then11
promise2
then21
then12
then23

但是，主线程在执行完 promise1 和 then11 之后，并不会立即执行 promise2 和 then21。这是因为 JavaScript 引擎采用了优化机制，当主线程遇到微任务时，它会先执行所有微任务，然后再执行宏任务。

在 JavaScript 中，Promise 的 then() 方法返回一个微任务，而 setTimeout() 方法返回一个宏任务。因此，在上面的代码片段中，then11 和 then21 是微任务，而 promise2 和 then23 是宏任务。

当主线程执行完 promise1 和 then11 之后，它会先执行所有微任务，即 then11 和 then21。然后，它才会执行宏任务，即 promise2 和 then23。这就是为什么实际的执行顺序与我们的预期不符。

常见的 Promise 异步执行问题

除了上述的 Promise 异步执行顺序问题之外，还有一些常见的 Promise 异步执行问题，例如：

Promise 链式调用中的错误处理： 当我们在 Promise 链式调用中遇到错误时，我们需要妥善处理错误，以避免后续的回调函数也被错误拒绝。
Promise 并发执行： 当我们有多个 Promise 并发执行时，我们需要考虑如何协调它们的执行顺序，以避免产生竞争条件。
Promise 超时处理： 当一个 Promise 执行超时时，我们需要考虑如何处理超时情况，以避免程序长时间阻塞。

Promise 的最佳实践

为了避免 Promise 异步执行中遇到的各种问题，我们可以遵循以下最佳实践：

使用 async/await 语法： async/await 语法是 JavaScript 中用于处理异步操作的语法糖，它使得异步编程更加简洁和容易理解。
使用 Promise.all() 和 Promise.race() 方法： Promise.all() 方法可以等待所有 Promise 执行完成，而 Promise.race() 方法可以等待第一个 Promise 执行完成。这两个方法可以帮助我们处理并发执行的 Promise。
使用 Promise.timeout() 方法： Promise.timeout() 方法可以为 Promise 设置超时时间，当 Promise 超时时，它会自动被拒绝。