JS手写——实现Promise的最大并发数控制_js promise 最多请求并发

作者：羊村懒王 | 2024-03-20 07:44:01

踩

js promise 最多请求并发

一、不使用Promise.race

维护一个并发池pool，先将其填满，然后每当其中的promise完成后添加新的promise，直到并发队列清空。


<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
 
<body>
 
</body>
<script>
  let request = options =>{
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{resolve(options.url)},options.delay)
    }).then((res)=>{
      console.log(`${options.url}任务完成`)
    })
  }
  let now = new Date()
  function addTask(options){
    let task = request(options)
    pool.push(task)
    task.then((res)=>{
      pool.splice(pool.indexOf(task),1)
      newOptions = requests.shift()
      if(newOptions){
        console.log(`${options.url}任务完成，耗时${(new Date()-now)/1000}秒,${newOptions.url}开始执行,预计耗时${newOptions.delay/1000}秒`)
        addTask(options)
      }else{
        console.log(`${options.url}任务完成，耗时${(new Date()-now)/1000}秒`)
      }
    })
 
  }
  let requests = [{
    url:'tencent',
    delay:1000
  },{
    url:'baidu',
    delay:3000
  },{
    url:'bytedance',
    delay:2000
  },{
    url:'tieba',
    delay:1000
  },{
    url:'bilibili',
    delay:1000
  },{
    url:'acfun',
    delay:1000
  },{
    url:'meituan',
    delay:1000
  }]
  let pool = []
  let max = 3
  while(pool.length<max){
    let options = requests.shift()
    addTask(options)
  }
  
</script>
 
</html>

二、使用Promise.race

原理类似，每当Promise.race()返回结果，就可以执行下一个promise了。


<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
 
<body>
  
</body>
 
<script>
   let request = options =>{
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{resolve(options.url)},options.delay)
    }).then((res)=>{
      console.log(`${options.url}任务完成`)
    })
  }
  let now = new Date()
 
  function addTask(options){
    let task = request(options)
    pool.push(task)
    task.then((res)=>{
      console.log(`${options.url}任务完成，耗时${(new Date()-now)/1000}秒`)
      pool.splice(pool.indexOf(task),1)
    })
  }
 
  function run(race){
    race.then((res)=>{
      let newOptions = requests.shift()
      if(newOptions){
        console.log(`${newOptions.url}开始执行,预计耗时${newOptions.delay/1000}秒`)
        addTask(newOptions)
        run(Promise.race(pool))
      }
 
    })
  }
 
 
  let requests = [{
    url:'tencent',
    delay:1000
  },{
    url:'baidu',
    delay:3000
  },{
    url:'bytedance',
    delay:2000
  },{
    url:'tieba',
    delay:1000
  },{
    url:'bilibili',
    delay:1000
  },{
    url:'acfun',
    delay:1000
  },{
    url:'meituan',
    delay:1000
  }]
  let pool = []
  let max = 3
  while(pool.length<max){
    let options = requests.shift()
    addTask(options)
  }
 
  let race = Promise.race(pool) // 返回最先完成的promise
  run(race)
</script>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/271743

JS手写——实现Promise的最大并发数控制_js promise 最多 请求并发

一、不使用Promise.race

二、使用Promise.race

JS手写——实现Promise的最大并发数控制_js promise 最多请求并发