如何在Promise未按时Resolve时抛出错误？仅超时未完成时触发

这个需求在异步请求场景里特别常见，核心逻辑就是利用Promise.race()让目标Promise和超时触发的Promise竞争——谁先完成，最终的Promise就会沿用谁的状态。下面给你一步步拆解可行的实现方案：

核心思路拆解 #

• 先创建一个「超时Promise」：在指定delay毫秒后自动触发reject，抛出超时错误。
• 用Promise.race()将这个超时Promise和你的业务Promise（比如$.ajax返回的请求Promise）放在一起。
• Promise.race()会返回一个新Promise：如果业务Promise在超时前成功resolve，新Promise就正常resolve；如果超时Promise先触发reject，新Promise就会带着超时错误被拒绝。

1. 通用超时包装函数（最常用） #

先写一个通用的工具函数，能给任意Promise加上超时限制：

function promiseWithTimeout(targetPromise, delay) {
  // 构建超时触发的Promise
  const timeoutReject = new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error(`请求超时，已超过 ${delay}ms`));
    }, delay);
  });

  // 让两个Promise竞争，返回结果
  return Promise.race([targetPromise, timeoutReject]);
}

结合jQuery Ajax使用示例 #

// 发起你的Ajax请求，得到Promise
const ajaxRequest = $.ajax({
  url: '/your-api-url',
  method: 'POST',
  data: { key: 'value' }
});

// 给请求加上3秒超时限制
promiseWithTimeout(ajaxRequest, 3000)
  .then(response => {
    console.log('请求成功:', response);
    // 处理业务逻辑
  })
  .catch(error => {
    console.error('请求失败/超时:', error.message);
    // 处理错误或超时逻辑
  });

2. 贴合你需求的promiseDelayReject函数 #

如果你想要一个更贴合你描述的promiseDelayReject(delay)形式的函数，可以把它做成高阶函数，返回一个包装器：

function promiseDelayReject(delay) {
  // 返回一个函数，用来包装目标Promise
  return function(targetPromise) {
    const timeoutReject = new Promise((_, reject) => {
      setTimeout(() => {
        reject(new Error(`操作超时，延迟 ${delay}ms 后拒绝`));
      }, delay);
    });
    return Promise.race([targetPromise, timeoutReject]);
  };
}

// 使用方式
const rejectAfter5s = promiseDelayReject(5000);
rejectAfter5s($.ajax('/your-api'))
  .then(res => console.log('成功:', res))
  .catch(err => console.error('失败/超时:', err));

进阶：超时后取消原请求 #

上面的实现有个小问题：即使超时Promise触发了reject，原Ajax请求其实还会在后台继续执行。如果需要在超时后直接取消请求，可以结合jQuery的abort()方法优化：

function promiseWithTimeout(promiseFactory, delay) {
  let timeoutId;
  // 传入工厂函数，用来获取请求实例和对应的Promise
  const { request, promise } = promiseFactory();

  const timeoutReject = new Promise((_, reject) => {
    timeoutId = setTimeout(() => {
      request.abort(); // 取消原Ajax请求
      reject(new Error('请求超时，已主动取消'));
    }, delay);
  });

  // 不管成功失败，最后都清除定时器
  return Promise.race([promise, timeoutReject])
    .finally(() => clearTimeout(timeoutId));
}

// 使用示例
promiseWithTimeout(() => {
  const xhr = $.ajax('/your-api');
  return { request: xhr, promise: xhr };
}, 3000)
.then(res => console.log('成功:', res))
.catch(err => console.error('出错:', err.message));

这样就能确保超时后请求被终止，避免不必要的资源消耗。

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