封装并发请求处理函数

代码解释

定义了一个函数 concurRequest，用于并发请求多个 URL 并返回它们的响应结果。

实现代码

/**
 * 并发函数
 * @param data 传入的请求数组 [url, url, url]
 * @param maxnum 同时发起请求的数量，默认为3
 */

function concurRequest(data, maxnum = 3){
    if(data.length === 0){
        return Promise.resolve([]);
    }
    // 返回一个Promise
    return new Promise((resolve) => {
        let nextIndex = 0;   // 下一个请求索引
        let result = [];  // 存储返回数据，并与请求一一对应返回
        let finishCount = 0;  // 记录完成请求的个数，全部完成及返回Promise结果
        // 声明一个辅助函数
        async function _request(){
            // 处理一下边界问题
            if(nextIndex >= data.length){
                return;
            }
            let i = nextIndex; // 用于记录当前请求是 data 数据中的哪一项，用于处理返回数据对应在result中的位置
            const url = data[nextIndex++]; // 从data数据中拿取数据，并让下标自增
            const res= (await fetch(url, { method: 'GET' })).json();
            result[i] = res;
            finishCount++;
            // 判断是否已经全部请求完成
            if(finishCount === data.length){
                resolve(result)
            }
            _request() // 递归调用，开启下一次请求
        }
        for (let i = 0; i < Math.min(maxnum, data.length); i++) {
            _request()            
        }
    }, 
    (reject) => {
        throw new Error(reject)
    })
}

简单使用

let arr = new Array(25).fill(0).map((_,i) => `/api?id=${i}`)

const handleClick = async () => {
    const data = await concurRequest(arr)
    console.log(data) // 
}

后端服务器测试

const http = require('http')
const url = require('url')

const server = http.createServer((req, res) => {
    const { query } = url.parse(req.url, true)

    res.setHeader('Content-Type', 'application/json; charset=utf-8')
        res.writeHead(200, { 'Content-Type': 'application/json' })
        res.end(JSON.stringify({code: 200, msg: `请求成功！请求数据ID为${query?.id}`}))
    
})


server.listen('9000', () => {
    console.log('Server is running at http://localhost:9000')
})

效果展示

数据请求结果展示