Promise then-catch链与双参数then的拒绝处理差异排查

功能概述 #

这段代码用于执行一组Promise，按解析顺序返回已解析的值，同时支持限制器——可指定最多解析多少个Promise就返回结果。

约束条件 #

• 若限制器数值大于Promise数组长度，直接抛出拒绝；
• 任意一个Promise抛出错误时，整体抛出拒绝；
• 已解析Promise数量达到限制器数值时，立即返回按解析顺序排列的结果，忽略剩余未完成的Promise。

问题现象 #

我编写了两个实现版本：

• v1：采用then-catch链式调用实现；
• v2：采用带有成功回调、失败回调双参数的then方法实现。

实际运行时，v1表现不符合预期：即便列表中有Promise拒绝，仍会正常返回解析结果；v2表现符合预期——只要有Promise拒绝，整体就抛出拒绝。

代码示例 #

v1（then-catch链式版本） #

async function somePromises(promises, promisesToWait) {
  // 若等待的Promise数量超过数组长度则抛出错误
  if (promisesToWait > promises.length) {
    return Promise.reject("Count is greater than the number of promises");
  }

  return await new Promise((resolve, reject) => {
    const resolvedPromiseValues = []; // 存储已解析的值
    let hasRejected = false; // 跟踪是否已拒绝

    promises.forEach((promise) => {
      promise()
        .then((resolvedValue) => {
          // 若已拒绝则不执行，v1中此逻辑未生效
          if (hasRejected) return;

          if (resolvedPromiseValues.length < promisesToWait) {
            resolvedPromiseValues.push(resolvedValue);

            if (resolvedPromiseValues.length === promisesToWait) {
              resolve(resolvedPromiseValues);
            }
          }
        })
        .catch((error) => {
          if (!hasRejected) {
            hasRejected = true;
          }

          reject(error);
        });
    });
  });
}

const rejectablePromises = [
  () => Promise.resolve(1),
  () => Promise.resolve(2),
  () => Promise.reject("I will reject"),
  () => Promise.resolve(3),
];

async function main() {
  somePromises(rejectablePromises, 3).then(console.log).catch(console.error);
}

main();

// 预期输出: I will reject
// 实际输出: [1, 2, 3]

v2（then双参数版本） #

async function somePromises(promises, promisesToWait) {
  // 若等待的Promise数量超过数组长度则抛出错误
  if (promisesToWait > promises.length) {
    return Promise.reject("Count is greater than the number of promises");
  }

  return await new Promise((resolve, reject) => {
    const resolvedPromiseValues = []; // 存储已解析的值
    let hasRejected = false; // 跟踪是否已拒绝

    promises.forEach((promise) => {
      promise().then(
        (resolvedValue) => {
          // 若已拒绝则不执行，v2中此逻辑正常生效
          if (hasRejected) return;

          if (resolvedPromiseValues.length < promisesToWait) {
            resolvedPromiseValues.push(resolvedValue);

            if (resolvedPromiseValues.length === promisesToWait)
              resolve(resolvedPromiseValues);
          }
        },
        (error) => {
          if (!hasRejected) {
            hasRejected = true;
          }

          reject(error);
        }
      );
    });
  });
}

const rejectablePromises = [
  () => Promise.resolve(1),
  () => Promise.resolve(2),
  () => Promise.reject("I will reject"),
  () => Promise.resolve(3),
];

async function main() {
  somePromises(rejectablePromises, 3).then(console.log).catch(console.error);
}

main();

// 预期输出: I will reject
// 实际输出: I will reject

疑问 #

这两种Promise写法到底有没有本质差异？查了文档没找到明确说明，ChatGPT说只是可读性差异，但明显行为不一样，我到底忽略了什么？

核心差异解析 #

这两种写法存在本质差异，核心在于错误捕获的范围和触发逻辑不同：

1. v1的then-catch链式逻辑 #

promise().then(...).catch(...)中的catch会捕获两个场景的错误：

• 原promise()本身的拒绝；
• then回调内部抛出的错误。

在你的示例中，当拒绝的Promise触发catch时，可能已有其他Promise完成并调用了resolve(resolvedPromiseValues)——而Promise一旦进入已决议（resolved）状态，后续再调用reject是无效的，状态无法更改。这就导致v1中拒绝逻辑被覆盖，最终返回了解析结果。

2. v2的then双参数逻辑 #

then(onFulfilled, onRejected)中的onRejected仅捕获原Promise的拒绝，不会处理onFulfilled回调内部的错误。

当某个Promise拒绝时，onRejected会立即触发，设置hasRejected = true并调用reject(error)，此时外层Promise还未被resolve，状态会被设置为拒绝。后续其他Promise的onFulfilled回调会因为hasRejected为true直接返回，不会执行resolve，符合预期。

修复v1的思路 #

要让v1和v2表现一致，需让catch仅捕获原Promise的拒绝，可将catch绑定到原Promise上：

promise()
  .catch((error) => {
    if (!hasRejected) {
      hasRejected = true;
      reject(error);
    }
  })
  .then((resolvedValue) => {
    if (hasRejected) return;
    // 后续逻辑不变
  });

内容的提问来源于stack exchange，提问作者Nawaaz Kortiwala