JavaScript Promise 高级模式

Promise高级模式：Promise.allSettled/waiting/retry/timeout实现、取消Promise（AbortController）、Promise并发控制（限制同时进行的Promise数量） · 难度：入门 · +10XP

JavaScript Promise 高级模式 —— 超时、重试、并发控制

你已经会用Promise和async/await了。但在真实项目中，经常会遇到这些需求：请求超时怎么办？失败后自动重试？同时发100个请求会不会把服务器打垮？

Promise 超时

function timeout(ms) {
  return new Promise((_, reject) =>
    setTimeout(() => reject(new Error('请求超时')), ms)
  );
}
// 哪个先完成就用哪个结果
const result = await Promise.race([fetch('/api/data'), timeout(5000)]);

Promise 重试

async function retry(fn, maxAttempts = 3) {
  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    try {
      return await fn();
    } catch (err) {
      if (attempt === maxAttempts) throw err;
      await new Promise(r => setTimeout(r, 1000 * attempt)); // 递增等待
    }
  }
}

并发控制

async function concurrentLimit(tasks, limit = 5) {
  const results = [];
  const executing = [];
  for (const task of tasks) {
    const p = Promise.resolve().then(() => task());
    results.push(p);
    if (limit <= tasks.length) {
      const e = p.then(() => executing.splice(executing.indexOf(e), 1));
      executing.push(e);
      if (executing.length >= limit) {
        await Promise.race(executing);
      }
    }
  }
  return Promise.all(results);
}

动手练习

1. 基础练习：实现一个带5秒超时的fetch请求函数。
2. 进阶应用：实现带指数退避的重试fetch——第1次等1秒、第2次等2秒、第3次等4秒。
3. 项目实战：用并发控制模式同时发送20个API请求，限制同时最多5个。