【JS】并发请求

需求

封装一个函数,做到可以进行并发请求,并将结果返回。

该函数接收两个参数,分别为urlsmaxNum
urls是数组,其中元素均为请求地址;maxNum表示最大并发数。

如果有完成的请求,会从urls中,按序取出下一个请求,请求的结果会计入返回的数组中,返回的数组中元素的索引与参数urls中保持一致。

function concurRequest(urls, maxNum) {
  return new Promise(resolve => {
  	// urls为空,直接返回
    if (urls.length === 0) {
      resolve([])
      return
    }
    
    let result = [] // 请求结果
    let index = 0 // urls索引
    let count = 0 // 当前请求完成数

    async function request() {
      if (index === urls.length) return // urls全部遍历了
      const i = index // 当前请求索引
      const url = urls[index] // 当前请求url
      index++

      try {
        const resp = await fetch(url) // 请求
        result[i] = resp // 将请求结果按照urls的顺序放入result数组中
      } catch (err) {
        result[i] = err
      } finally {
        count++ // 请求完成数+1
        if (count === urls.length) { resolve(result) }// 判断是否所有请求都已完成
        request()
      }
    }

    const min = Math.min(urls.length, maxNum)
    for (let i = 0; i < min; i++) {
      request()
    }
  })
}

测试

const urls = []
for (let i = 1; i < 11; i++) {
  urls.push(`https://jsonplaceholder.typicode.com/todos/${i}`)
}
concurRequest(urls, 3).then(res => {
  console.log(res);
})
  • 22
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

田本初

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值