如何在JavaScript中控制Promise组执行：任一拒绝则取消其余操作？

当你需要一组Promise任意一个失败就终止其余操作时，核心问题是原生Promise本身没有内置取消机制，因此可以通过以下几种方案实现：

方案1：使用AbortController（现代环境推荐） #

AbortController是ES2018引入的原生API，支持现代浏览器和Node.js（v15+），它可以通过AbortSignal向异步操作发送中止信号，实现操作取消。

步骤1：封装可取消的异步操作 #

让每个删除函数接收AbortSignal，在信号触发中止时清理资源并拒绝Promise：

// 封装可取消的删除头像操作
function deleteAvatar(signal) {
  return new Promise((resolve, reject) => {
    // 信号已中止，直接拒绝
    if (signal.aborted) {
      reject(new DOMException('操作已取消', 'AbortError'));
      return;
    }

    // 模拟实际异步删除（比如API请求）
    const taskId = setTimeout(() => {
      console.log('头像删除成功');
      resolve('avatar-deleted');
    }, 1000);

    // 监听中止信号，触发时清理资源并拒绝
    signal.addEventListener('abort', () => {
      clearTimeout(taskId);
      reject(new DOMException('头像删除已取消', 'AbortError'));
    });
  });
}

// 同理封装删除封面和用户对象的函数
function deleteCover(signal) {
  return new Promise((resolve, reject) => {
    if (signal.aborted) {
      reject(new DOMException('操作已取消', 'AbortError'));
      return;
    }

    const taskId = setTimeout(() => {
      console.log('封面删除成功');
      resolve('cover-deleted');
    }, 1500);

    signal.addEventListener('abort', () => {
      clearTimeout(taskId);
      reject(new DOMException('封面删除已取消', 'AbortError'));
    });
  });
}

function deleteUser(signal) {
  return new Promise((resolve, reject) => {
    if (signal.aborted) {
      reject(new DOMException('操作已取消', 'AbortError'));
      return;
    }

    const taskId = setTimeout(() => {
      // 模拟删除失败场景
      reject(new Error('用户删除失败'));
      // 正常成功逻辑：
      // console.log('用户删除成功');
      // resolve('user-deleted');
    }, 500);

    signal.addEventListener('abort', () => {
      clearTimeout(taskId);
      reject(new DOMException('用户删除已取消', 'AbortError'));
    });
  });
}

步骤2：执行并监听失败 #

用Promise.all并行执行所有操作，一旦任意Promise拒绝，立即触发中止信号取消其余操作：

async function runDeletions() {
  const controller = new AbortController();
  const { signal } = controller;

  try {
    const results = await Promise.all([
      deleteAvatar(signal),
      deleteCover(signal),
      deleteUser(signal)
    ]);
    console.log('所有删除操作完成:', results);
  } catch (err) {
    // 触发中止信号，取消所有剩余操作
    controller.abort();
    console.error('删除失败，已取消其余操作:', err.message);
  }
}

runDeletions();

方案2：手动封装可取消Promise（兼容旧环境） #

如果你的运行环境不支持AbortController，可以手动给每个Promise绑定取消方法，在失败时主动调用这些方法终止操作。

// 封装可取消Promise的工具函数
function createCancelablePromise(executor) {
  let cancelFn;
  const promise = new Promise((resolve, reject) => {
    cancelFn = (reason) => {
      reject(new Error(reason || '操作已取消'));
    };
    executor(resolve, reject, (cancelImpl) => {
      cancelFn = cancelImpl;
    });
  });
  return { promise, cancel: cancelFn };
}

// 创建三个可取消的删除操作
const { promise: deleteAvatar, cancel: cancelAvatar } = createCancelablePromise((resolve, reject, setCancel) => {
  const taskId = setTimeout(() => {
    console.log('头像删除成功');
    resolve('avatar-deleted');
  }, 1000);
  // 自定义取消逻辑：清理资源并拒绝
  setCancel(() => {
    clearTimeout(taskId);
    reject(new Error('头像删除已取消'));
  });
});

const { promise: deleteCover, cancel: cancelCover } = createCancelablePromise((resolve, reject, setCancel) => {
  const taskId = setTimeout(() => {
    console.log('封面删除成功');
    resolve('cover-deleted');
  }, 1500);
  setCancel(() => {
    clearTimeout(taskId);
    reject(new Error('封面删除已取消'));
  });
});

const { promise: deleteUser, cancel: cancelUser } = createCancelablePromise((resolve, reject, setCancel) => {
  const taskId = setTimeout(() => {
    reject(new Error('用户删除失败'));
  }, 500);
  setCancel(() => {
    clearTimeout(taskId);
    reject(new Error('用户删除已取消'));
  });
});

// 执行逻辑
async function runDeletions() {
  try {
    const results = await Promise.all([deleteAvatar, deleteCover, deleteUser]);
    console.log('所有删除完成:', results);
  } catch (err) {
    console.error('删除失败，取消其余操作:', err.message);
    // 调用所有取消方法终止剩余操作
    cancelAvatar();
    cancelCover();
    cancelUser();
  }
}

runDeletions();

方案3：串行执行（备选，效率较低） #

如果业务允许按顺序执行操作（比如先删除用户对象，再删除头像和封面），那么串行执行天然满足“前面失败则后面不执行”的逻辑，无需额外取消机制：

async function runDeletionsSerial() {
  try {
    // 先执行最关键的用户删除操作
    await deleteUser();
    // 用户删除成功后，再并行删除头像和封面
    await Promise.all([deleteAvatar(), deleteCover()]);
    console.log('所有删除操作完成');
  } catch (err) {
    console.error('删除失败:', err.message);
  }
}

// 注意：这里的deleteUser/deleteAvatar/deleteCover是普通Promise函数，无需取消逻辑
function deleteUser() {
  return new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error('用户删除失败')), 500);
  });
}

function deleteAvatar() {
  return new Promise(resolve => setTimeout(() => {
    console.log('头像删除成功');
    resolve();
  }, 1000));
}

function deleteCover() {
  return new Promise(resolve => setTimeout(() => {
    console.log('封面删除成功');
    resolve();
  }, 1500));
}

方案选择建议 #

• 优先选AbortController：原生标准，代码简洁，支持资源清理，适配现代环境。
• 手动封装适合旧环境：兼容不支持AbortController的浏览器/Node.js版本。
• 串行执行仅适用于允许顺序操作的场景：逻辑简单但执行效率低于并行。

内容的提问来源于stack exchange，提问作者Aya Othman