前端并发请求数量控制

程序猿小泓

已于 2022-11-09 20:02:37 修改

阅读量2.5k

点赞数 3

文章标签：前端 javascript 后端服务器网络

于 2022-11-09 20:01:39 首次发布

本文链接：https://blog.csdn.net/qq_37669585/article/details/127776589

版权

本文介绍如何使用JavaScript实现在前端控制同时发起的API请求不超过3个，通过Promise和异步请求管理来避免系统崩溃。实例演示了如何使用limitRequest函数处理100个URL，确保并发请求的稳定执行。

摘要由CSDN通过智能技术生成

在前端会遇到需求：例如，有100个接口需要请求，但是同时发送会导致崩溃，所以需要控制同一时刻下的请求数量在3个值。

并发请求的数量控制——js实现

const limitRequest = (urls, maxNum) => {
  return new Promise((resolve) => {
    if (urls.length === 0) {
      resolve([]);
      return
    }
	
	// 定义数组记录每次请求的结果（无论成功失败）
    const results = []
    let index = 0;
    let cnt = 0;

    // 发送请求
    async function request() {
      if (index === urls.length) return;
      const i = index;
      const url = urls[i];
      index++;
      console.log(url);
      try {
        const response = await fetch(url);
        results[i] = response;
      } catch (err) {
        results[i] = err;
      } finally {
        cnt++;
        // 判断是否请求都完成
        if (cnt === urls.length) {
          console.log('所有请求已完成')
          resolve(results)
        }
        request()
      }
    }

    // maxNum和urls.length取最小进行调用
    // 将异步的并发数控制在，同一时间请求times次
    const times = Math.min(maxNum, urls.length);
    for (let i = 0; i < times; i++) {
      request()
    }
  })
}

// 测试数据
const urls = [];
for (let i = 1; i <= 100; i++) {
  urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`)
}
limitRequest(urls, 3).then(res => {
  console.log(res)
})