你不知道的前端并发请求控制最优实现

前言:笔者在校招面试中,被问到promise,让实现一到并发请求的题目,也是非常经典,在平时前端业务中,经常会遇到要处理的,今天我们一起来看下这道题目⬇️

分析

根据需求,我们需要设计一个能够动态管理并发请求的机制,确保同时运行的请求数量不会超过指定的最大值。当某个请求完成时,若还有待处理的请求,则立即从队列中取出下一个请求并开始执行。最终,当所有请求都完成后,将结果以数组形式返回给调用者。

题目:

实现一个并发请求控制

要求:实现一个函数,传入urls数组和最大并发数,当并发请求数大于最大并发数时,控制并发请求,当请求完成时,继续请求,直到所有请求完成,这里要求并发只要有一个完成,此时请求排队队列里面还有请求的话,取出来加入到并发请求中[重点]

/**
 * @urls urls数组
 * @maxConcurent 最大并发数
 * @returns 请求的结果数组
 */
function concurrentRequest(urls,maxConcurrent){
 // 代码实现逻辑
}

代码实现

function concurrentRequest(urls, maxConcurrent) {
  // 存储所有请求的结果
  let results = [];
  // 当前活跃请求的计数
  let activeCount = 0;
  // 请求的序号,用于跟踪结果数组中的位置
  let currentIndex = 0;

  return new Promise((resolve, reject) => {
    // 执行请求的函数
    const executeRequest = async (url, index) => {
      activeCount++; // 增加活跃请求计数
      try {
        // 模拟请求,这里用fetch,实际使用时应根据实际情况替换
        // const response = await fetch(url);
        // const data = await response.json();

        const res = await url();
        results[index] = res;
        // results[index] = data; // 保存请求结果
        console.log(`urls[${index + 1}]请求完成了,结果为:${res}`);
      } catch (error) {
        results[index] = error; // 保存请求错误
        console.log(`urls[${index + 1}]请求失败了了,结果为:${error}`);
      } finally {
        activeCount--; // 请求完成后减少活跃请求计数
        if (currentIndex < urls.length) {
          // 如果还有URL待请求,启动下一个请求
          console.log(`urls[${currentIndex}]开始请求了...`);
          executeRequest(urls[currentIndex], currentIndex++);
        } else if (activeCount === 0) {
          // 如果没有活跃请求,所有请求都完成了,解析Promise
          resolve(results);
        }
      }
    };

    // 初始化请求,直到达到最大并发数
    while (currentIndex < maxConcurrent && currentIndex < urls.length) {
      console.log(`urls[${currentIndex + 1}]开始请求了...`);
      executeRequest(urls[currentIndex], currentIndex++);
    }
  });
}

此函数首先初始化了一个结果数组、活跃请求计数器以及当前请求索引。然后定义了一个内部异步函数executeRequest来执行单个请求。在executeRequest中,每当一个请求完成(无论是成功还是失败),都会更新活跃请求计数,并检查是否有待处理的URL。如果有,则继续发起新的请求;如果没有待处理的URL并且活跃请求计数为0,则说明所有请求已经完成,这时可以解析Promise并将结果返回。

在主函数体中,通过while循环启动初始的一批请求,直至达到最大并发数限制或者urls数组遍历完毕。

模拟并发请求场景

const tasks = [p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14];

const p1 = () =>
  new Promise((resolve, reject) => setTimeout(reject, 1000, "p1-reject"));
const p2 = () =>
  new Promise((resolve, reject) => setTimeout(resolve, 1000, "p2-resolve"));
const p3 = () =>
  new Promise((resolve, reject) => setTimeout(reject, 1000, "p3-reject"));
const p4 = () =>
  new Promise((resolve, reject) => setTimeout(resolve, 1000, "p4-resolve"));
const p5 = () =>
  new Promise((resolve, reject) => setTimeout(reject, 1000, "p5-reject"));
const p6 = () =>
  new Promise((resolve, reject) => setTimeout(resolve, 1000, "p6-resolve"));
const p7 = () =>
  new Promise((resolve, reject) => setTimeout(reject, 1000, "p7-reject"));
const p8 = () =>
  new Promise((resolve, reject) => setTimeout(resolve, 1000, "p8-resolve"));
const p9 = () =>
  new Promise((resolve, reject) => setTimeout(reject, 1000, "p9-reject"));
const p10 = () =>
  new Promise((resolve, reject) => setTimeout(resolve, 1000, "p10-resolve"));
const p11 = () =>
  new Promise((resolve, reject) => setTimeout(reject, 1000, "p11-reject"));
const p12 = () =>
  new Promise((resolve, reject) => setTimeout(resolve, 1000, "p12-resolve"));
const p13 = () =>
  new Promise((resolve, reject) => setTimeout(reject, 1000, "p13-reject"));
const p14 = () =>
  new Promise((resolve, reject) => setTimeout(resolve, 1000, "p14-resolve"));

调用效果:⬇️

你不知道的前端并发请求控制最优实现

总结

这段代码提供了一个实用的并发请求控制解决方案,通过Promise和async/await机制实现了动态调度和执行异步请求的功能。这种控制策略有助于避免资源浪费,提高系统稳定性,尤其适用于网络请求密集型的应用场景。

原文链接:https://juejin.cn/post/7343893453677297716 作者:前端小菜哇

(0)
上一篇 2024年3月9日 上午10:58
下一篇 2024年3月9日 上午11:08

相关推荐

发表回复

登录后才能评论