面试官:假如有几十个请求,如何去控制并发?

面试官:看你简历上做过图片或文件批量下载 ,那么假如我一次性下载几十个,如何去控制并发请求的?

让我想想,额~, 选中ID,循环请求?,八嘎!肯定不是那么沙雕的做法,这样做服务器直接崩溃啦!突然灵光一现,请求池!!!

我:利用Promise模拟任务队列,从而实现请求池效果。

面试官:大佬!

废话不多说,正文开始:

众所周知,浏览器发起的请求最大并发数量一般都是6~8个,这是因为浏览器会限制同一域名下的并发请求数量,以避免对服务器造成过大的压力。

首先让我们来模拟大量请求的场景

javascript 复制代码
const ids = new Array(100).fill('')

console.time()
for (let i = 0; i < ids.length; i++) {
  console.log(i)
}
console.timeEnd()

一次性并发上百个请求,要是配置低一点,又或者带宽不够的服务器,直接宕机都有可能,所以我们前端这边是需要控制的并发数量去为服务器排忧解难。

什么是队列?

先进先出就是队列,push一个的同时就会有一个被shift。我们看下面的动图可能就会更加的理解:

我们接下来的操作就是要模拟上图的队列行为。

定义请求池主函数函数

javascript 复制代码
export const handQueue = (  
  reqs // 请求数量
) => {}

接受一个参数reqs,它是一个数组,包含需要发送的请求。函数的主要目的是对这些请求进行队列管理,确保并发请求的数量不会超过设定的上限。

定义dequeue函数

scss 复制代码
const dequeue = () => {  
  while (current < concurrency && queue.length) {  
    current++;  
    const requestPromiseFactory = queue.shift() // 出列  
    requestPromiseFactory()  
      .then(() => { // 成功的请求逻辑  
      })  
      .catch(error => { // 失败  
        console.log(error)  
      })  
      .finally(() => {  
        current--  
        dequeue()  
      });  
  }  
}

这个函数用于从请求池中取出请求并发送。它在一个循环中运行,直到当前并发请求数current达到最大并发数concurrency或请求池queue为空。对于每个出队的请求,它首先增加current的值,然后调用请求函数requestPromiseFactory来发送请求。当请求完成(无论成功还是失败)后,它会减少current的值并再次调用dequeue,以便处理下一个请求。

定义返回请求入队函数

scss 复制代码
return (requestPromiseFactory) => {  
  queue.push(requestPromiseFactory) // 入队  
  dequeue()  
}

函数返回一个函数,这个函数接受一个参数requestPromiseFactory,表示一个返回Promise的请求工厂函数。这个返回的函数将请求工厂函数加入请求池queue,并调用dequeue来尝试发送新的请求,当然也可以自定义axios,利用Promise.all统一处理返回后的结果。

实验

scss 复制代码
const enqueue = requestQueue(6) // 设置最大并发数
for (let i = 0; i < reqs.length; i++) {  // 请求
  enqueue(() => axios.get('/api/test' + i))  
}

我们可以看到如上图所示,请求数确实被控制了,只有有请求响应成功的同时才会有新的请求进来,极大的降低里服务器的压力,后端的同学都只能喊6

整合代码

typescript 复制代码
import axios from 'axios'

export const handQueue = (
  reqs // 请求总数
) => {
  reqs = reqs || []


  const requestQueue = (concurrency) => {
    concurrency = concurrency || 6 // 最大并发数
    const queue = [] // 请求池
    let current = 0

    const dequeue = () => {
      while (current < concurrency && queue.length) {
        current++;
        const requestPromiseFactory = queue.shift() // 出列
        requestPromiseFactory()
          .then(() => { // 成功的请求逻辑
          })
          .catch(error => { // 失败
            console.log(error)
          })
          .finally(() => {
            current--
            dequeue()
          });
      }

    }

    return (requestPromiseFactory) => {
      queue.push(requestPromiseFactory) // 入队
      dequeue()
    }

  }

  const enqueue = requestQueue(6)

  for (let i = 0; i < reqs.length; i++) {

    enqueue(() => axios.get('/api/test' + i))
  }
}
相关推荐
sunbyte13 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子14 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
markyankee10118 分钟前
Vue 计算属性和侦听器详解
vue.js
Spider_Man1 小时前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
盏茶作酒291 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js
一大树2 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js
10年前端老司机2 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
ze_juejin2 小时前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
安替-AnTi3 小时前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林
小样还想跑4 小时前
axios无感刷新token
前端·javascript·vue.js