JavaScript Promise 完整指南

执行器函数会立即执行，这是 Promise 的一个重要特性。当异步操作完成时，根据结果调用 resolve 或 reject 来改变 Promise 的状态。

2.2 使用 Promise

创建 Promise 后，我们可以通过 .then()、.catch() 和 .finally() 方法来处理异步操作的结果。

promise
  .then(result => {
    console.log(result); // "操作成功"
  })
  .catch(error => {
    console.error(error); // "操作失败"
  })
  .finally(() => {
    console.log("操作完成"); // 无论成功失败都会执行
  });

• .then() 方法接收两个可选参数（通常只传第一个）：成功回调和失败回调。
• .catch() 专门用于处理错误情况，是 .then(null, errorHandler) 的语法糖。
• .finally() 无论 Promise 最终状态如何都会执行，适合执行清理操作。

2.3 链式调用

Promise 的链式调用是其强大之处，可以有效解决回调地狱问题。每个 .then() 或 .catch() 都会返回一个新的 Promise，可以继续调用后续方法。

// 示例：顺序异步操作
doSomething()
  .then(result => doSomethingElse(result))
  .then(newResult => doThirdThing(newResult))
  .then(finalResult => {
    console.log(`最终结果：${finalResult}`);
  })
  .catch(error => {
    console.error(`出错：${error}`);
  });

在链式调用中，需要特别注意：要在回调函数中返回 Promise 或值，以便下一个 .then() 能够接收到正确的结果。

3 Promise 的静态方法

Promise 提供了多个静态方法，用于处理多个 Promise 实例的复杂场景。

3.1 Promise.all()

Promise.all() 接收一个 Promise 可迭代对象（如数组），当所有 Promise 都成功时，返回一个包含所有结果的数组；如果有一个失败，则立即拒绝。

const promise1 = Promise.resolve(1);
const promise2 = Promise.resolve(2);
const promise3 = Promise.resolve(3);
Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results); // [1, 2, 3]
  })
  .catch(error => {
    console.error(error); // 如果任何一个失败，捕获第一个错误
  });

适用场景：多个异步操作需要并行执行且全部成功后才能进行下一步处理，如同时发起多个 API 请求。

3.2 Promise.race()

Promise.race() 接收一个 Promise 可迭代对象，只要其中一个 Promise 完成（无论成功或失败），就返回该 Promise 的结果。

const promise1 = new Promise((resolve) => {
  setTimeout(() => resolve("第一个完成"), 500);
});
const promise2 = new Promise((resolve) => {
  setTimeout(() => resolve("第二个完成"), 100);
});
Promise.race([promise1, promise2])
  .then(result => {
    console.log(result); // "第二个完成"
  });

适用场景：请求超时处理、响应优先级处理。

3.3 Promise.allSettled()

Promise.allSettled() 等待所有 Promise 完成（无论成功或失败），返回一个包含每个 Promise 结果的对象数组。

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject("出错");
Promise.allSettled([promise1, promise2])
  .then(results => {
    console.log(results); // [
      // { status: 'fulfilled', value: 1 },
      // { status: 'rejected', reason: '出错' }
    // ]
  });

适用场景：需要知道所有异步操作最终结果的情况，无论个别操作是否成功。

3.4 Promise.any()

Promise.any() 接收一个 Promise 可迭代对象，只要其中一个 Promise 成功，就返回该 Promise 的结果；如果所有 Promise 都失败，则抛出 AggregateError。

const promise1 = Promise.reject("错误 1");
const promise2 = Promise.resolve("成功 2");
const promise3 = Promise.resolve("成功 3");
Promise.any([promise1, promise2, promise3])
  .then(result => {
    console.log(result); // "成功 2"
  });

适用场景：从多个备用源获取资源，只要有一个成功即可。

表：Promise 静态方法比较

4 Promise 的高级技巧

4.1 并发控制

当需要处理大量并行操作但又需要限制并发数量时，可以实现 Promise 并发控制。

/**
 * 控制 Promise 并发数量
 * @param {Array} promises 返回 Promise 的函数数组
 * @param {number} limit 最大并发数
 */
function concurrentControl(promises, limit) {
  return new Promise((resolve) => {
    let currentIndex = 0;
    let resolvedCount = 0;
    const results = [];
    const total = promises.length;
    // 初始并发
    for (let i = 0; i < Math.min(limit, total); i++) {
      runPromise(currentIndex++);
    }

    function runPromise(index) {
      if (index >= total) return;
      const promiseFunc = promises[index];
      Promise.resolve(promiseFunc())
        .then(result => {
          results[index] = result;
        })
        .catch(error => {
          results[index] = error;
        })
        .finally(() => {
          resolvedCount++;
          if (resolvedCount === total) {
            resolve(results);
          } else if (currentIndex < total) {
            runPromise(currentIndex++);
          }
        });
    }
  });
}

// 使用示例
const tasks = Array(10).fill(0).map((_, i) => () => new Promise(resolve => {
  setTimeout(() => {
    console.log(`任务 ${i} 完成`);
    resolve(i);
  }, Math.random() * 2000);
}));
concurrentControl(tasks, 3).then(results => {
  console.log("所有任务完成:", results);
});

4.2 Promise 超时处理

利用 Promise.race() 可以实现 Promise 超时控制。

/**
 * 为 Promise 添加超时功能
 * @param {Promise} promise 原始 Promise
 * @param {number} timeout 超时时间（毫秒）
 */
function promiseWithTimeout(promise, timeout) {
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error(`操作超时（${timeout}ms）`));
    }, timeout);
  });
  return Promise.race([promise, timeoutPromise]);
}

// 使用示例
const fetchData = new Promise(resolve => {
  setTimeout(() => resolve("数据获取成功"), 3000);
});
promiseWithTimeout(fetchData, 2000)
  .then(result => console.log(result))
  .catch(error => console.error(error.message)); // "操作超时（2000ms）"

4.3 Promise 重试逻辑

对于可能临时失败的异步操作，可以实现 重试机制以提高成功率。

/**
 * Promise 重试函数
 * @param {Function} promiseFn 返回 Promise 的函数
 * @param {number} maxAttempts 最大重试次数
 * @param {number} delay 重试延迟时间
 */
function retryPromise(promiseFn, maxAttempts, delay) {
  return new Promise((resolve, reject) => {
    const attempt = (attemptNumber) => {
      promiseFn()
        .then(resolve)
        .catch(error => {
          if (attemptNumber >= maxAttempts) {
            reject(error);
          } else {
            console.log(`第 ${attemptNumber} 次尝试失败，${delay}ms 后重试...`);
            setTimeout(() => attempt(attemptNumber + 1), delay);
          }
        });
    };
    attempt(1);
  });
}

// 使用示例
let attemptCount = 0;
function unstableAPI() {
  attemptCount++;
  return new Promise((resolve, reject) => {
    if (attemptCount < 3) {
      reject(new Error("API 调用失败"));
    } else {
      resolve("数据获取成功");
    }
  });
}
retryPromise(unstableAPI, 3, 1000)
  .then(result => console.log(result)) // 第 3 次尝试成功
  .catch(error => console.error(error));

4.4 将回调函数转换为 Promise

将传统的回调式函数转换为 Promise，可以使用以下模式：

// 常规回调函数转换为 Promise
function callbackToPromise(fn, ...args) {
  return new Promise((resolve, reject) => {
    fn(...args, (error, result) => {
      if (error) {
        reject(error);
      } else {
        resolve(result);
      }
    });
  });
}

// 使用示例：将 fs.readFile 转换为 Promise
const fs = require('fs');
function readFilePromise(filePath, encoding) {
  return callbackToPromise(fs.readFile, filePath, encoding);
}
readFilePromise('./example.txt', 'utf8')
  .then(content => console.log(content))
  .catch(error => console.error(error));

// Node.js 内置的 util.promisify 也可以实现相同功能
const util = require('util');
const readFile = util.promisify(fs.readFile);

5 Promise 的最佳实践与常见陷阱

5.1 最佳实践

1. 始终捕获错误：每个 Promise 链都应该以 .catch() 结束，避免未处理的拒绝。
2. 利用 Promise.all() 进行并行操作：无关的异步操作应该并行执行以提高效率。
3. 适当使用 async/await：对于复杂流程，async/await 可以提供更清晰的代码结构。

使用链式调用替代嵌套：避免 Promise 嵌套，保持代码扁平。

// 不推荐：嵌套 Promise
firstPromise.then(firstResult => {
  secondPromise(firstResult).then(secondResult => {
    thirdPromise(secondResult).then(thirdResult => {
      console.log(thirdResult);
    });
  });
});

// 推荐：链式调用
firstPromise
  .then(firstResult => secondPromise(firstResult))
  .then(secondResult => thirdPromise(secondResult))
  .then(thirdResult => console.log(thirdResult))
  .catch(error => console.error(error));

5.2 常见陷阱

1. 同时使用回调与 Promise：避免在 Promise 中同时使用回调模式和 Promise 模式，这会导致重复处理。

错误处理不当：在 Promise 链中，错误会沿着链传播直到遇到 .catch()，但需要合理放置。

// 可能不恰当的错误处理
promise
  .then(handleSuccess)
  .catch(handleError) // 捕获所有错误
  .then(anotherOperation); // 无论错误与否都会执行

// 更精确的错误处理
promise
  .then(handleSuccess)
  .then(anotherOperation)
  .catch(handleError); // 只捕获前面链中的错误

忘记返回 Promise：在 .then() 中如果不返回 Promise，后续 .then() 会立即执行。

// 错误示例
promise
  .then(result => {
    anotherPromise(result); // 忘记返回
  })
  .then(finalResult => {
    // finalResult 会是 undefined
  });

// 正确做法
promise
  .then(result => {
    return anotherPromise(result); // 显式返回
  })
  .then(finalResult => {
    // 正确接收到结果
  });

6 Promise 与 async/await 的结合

async/await 是 ES7 引入的语法糖，基于 Promise 实现，让异步代码看起来像同步代码。

6.1 基本用法

// 使用 Promise
function fetchData() {
  return fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      return processData(data);
    })
    .catch(error => {
      console.error('出错:', error);
    });
}

// 使用 async/await
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    return processData(data);
  } catch (error) {
    console.error('出错:', error);
  }
}

6.2 优势与注意事项

async/await 的优势：

• 代码更简洁，类似同步代码的书写方式
• 错误处理可以使用 try/catch 块
• 更容易调试，不需要跟踪多个 .then() 块

注意事项：

• await 只能在 async 函数中使用
• 过度顺序化可能影响性能（可以使用 Promise.all() 优化）
• 错误处理需要谨慎，未捕获的错误可能导致 Promise 被静默拒绝

6.3 并行操作优化

// 顺序执行 - 效率低
async function sequentialFetch() {
  const user = await fetch('/api/user');
  const posts = await fetch('/api/posts');
  const comments = await fetch('/api/comments');
  return { user, posts, comments };
}

// 并行执行 - 效率高
async function parallelFetch() {
  const [user, posts, comments] = await Promise.all([
    fetch('/api/user'),
    fetch('/api/posts'),
    fetch('/api/comments')
  ]);
  return { user, posts, comments };
}

总结

Promise 是 JavaScript 异步编程的核心基础，掌握 Promise 对于现代 JavaScript 开发至关重要。本文全面介绍了 Promise 的基本概念、创建方法、链式调用、错误处理、静态方法以及高级应用场景。