一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!

在前端开发中,批量处理异步请求是常见需求,比如批量上传图片、爬取数据、导入大批量信息等。但如果不加控制,可能会遇到接口限流、浏览器卡顿、甚至服务端拒绝请求等问题。今天带你用最简单的方式,掌握两种常用的 Promise 并发控制技巧,并结合实际开发场景,分析常见坑点和解决办法!

场景一:批量执行(分批并发)

应用场景举例:

  • 批量上传图片时,后端只允许每次最多5个请求,否则会返回"请求过多"错误。
  • 需要分批导入数据,保证每批都能被后端稳定处理。

常见问题:

  • 一次性全部发起请求,容易被限流或接口报错。
  • 没有分批,用户体验差,失败率高。

解决思路:将任务分成一批一批,每批最多 N 个,上一批全部完成后再执行下一批。

实现代码如下:

js 复制代码
// 并发分批执行,每批limit个,上一批全部完成后再执行下一批
function batchRequest(tasks, limit) {
  const results = new Array(tasks.length);
  let index = 0;

  const runBatch = () => {
    if (index >= tasks.length) return Promise.resolve();
    const batch = tasks.slice(index, index + limit).map((task, i) => {
      const realIndex = index + i;
      return Promise.resolve(task())
        .then(value => ({ status: 'fulfilled', value }))
        .catch(reason => ({ status: 'rejected', reason }))
        .then(result => {
          results[realIndex] = result;
        });
    });
    index += limit;
    return Promise.all(batch).then(() => {
      if (index < tasks.length) {
        console.log('本批次执行完毕,将要执行下一个批次');
      }
      return runBatch();
    });
  }

  return runBatch().then(() => results);
}

// 模拟异步任务
const mockTask = (id, duration) => {
  return () =>
    new Promise(resolve => {
      console.log(`[排队] 任务${id} 进入队列,需要 ${duration}ms`);
      setTimeout(() => resolve(`任务${id}结果`), duration);
    });
};

// 创建测试任务
const tasks = [
  mockTask(1, 2000),
  mockTask(2, 1500),
  mockTask(3, 800),
  mockTask(4, 1200),
  mockTask(5, 3000),
  mockTask(6, 500),
  mockTask(7, 1800),
  mockTask(8, 600),
  mockTask(9, 900),
  mockTask(10, 700),
];

// 用法示例
batchRequest(tasks, 3).then(results => {
  console.log('====== 所有任务完成 ======');
  console.log('最终结果:', results);
});

运行结果:

场景二:最大并发数控制(随时补位)

应用场景举例:

  • 爬虫抓取数据时,既要快又不能让服务器崩溃
  • 前端批量请求接口,既想高效又要防止被限流

常见问题

  • 没有限流,接口容易被封
  • 并发数太低,效率又太低

解决思路:始终保持 N 个任务在执行,有空位就立刻补新任务,直到全部完成。

实现代码如下:

js 复制代码
// 最大并发数控制,随时补位
function controlRequest(tasks, limit) {
  return new Promise(resolve => {
    const results = new Array(tasks.length);
    let currentIndex = 0;
    let completeCount = 0;
    let currentRunCount = 0;

    const runTask = () => {
      while (currentIndex < tasks.length && currentRunCount < limit) {
        const taskIndex = currentIndex++;
        currentRunCount++;
        const currentTask = tasks[taskIndex];
        console.log(`[启动] 任务${taskIndex + 1} 开始 (并发数:${currentRunCount})`);
        Promise.resolve(currentTask())
          .then(value => { results[taskIndex] = { status: 'fulfilled', value }; })
          .catch(reason => { results[taskIndex] = { status: 'rejected', reason }; })
          .finally(() => {
            completeCount++;
            currentRunCount--;
            if (completeCount === tasks.length) {
              resolve(results);
            } else {
              runTask();
            }
          });
      }
    }
    runTask();
  });
}

// 模拟异步任务
const mockTask = (id, duration) => {
  return () =>
    new Promise(resolve => {
      console.log(`[排队] 任务${id} 进入队列,需要 ${duration}ms`);
      setTimeout(() => resolve(`任务${id}结果`), duration);
    });
};

// 创建测试任务
const tasks = [
  mockTask(1, 2000),
  mockTask(2, 1500),
  mockTask(3, 800),
  mockTask(4, 1200),
  mockTask(5, 3000),
  mockTask(6, 500),
  mockTask(7, 1800),
  mockTask(8, 600),
  mockTask(9, 900),
  mockTask(10, 700),
];
// 用法示例
controlRequest(tasks, 3).then(results => {
  console.log('====== 所有任务完成 ======');
  console.log('最终结果:', results);
});

运行结果:

欢迎在评论区留言交流,如果觉得有用,记得点赞+关注

相关推荐
RadiumAg3 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo7 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele23 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子2 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情2 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz2 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
天天扭码3 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html