【前端开发】限制发送请求的个数

let sendDataList = [1,2,3,4,5,6,7,8,9,10]; //发送的数据体
    let limit = 3,i=0;

    //先发送limit个请求
    for(let i = 0;i < limit;i++){
        send(sendDataList.shift());
    }

    /**
     * 返回一个Promise对象，为下一次请求做准备
     */
    function promiseReq(data){
        i++;
        return new Promise(resolve => {
            console.log(`第${i}个请求开始发送`);
            /**
             * 模拟发送请求的过程,setTimeout替换成实际的请求即可
             */
            setTimeout(() => {
                resolve(data);
            }, i*1000);
        })
    }

    function send(data){
        //如果有数据再发送请求
        if(data){
            promiseReq(data).then(res => {
                console.log(`第${res}个请求结束`);
                send(sendDataList.shift());
            })
        }
    }

效果如下

这样只是初步实现了，使用的时候还是有些许麻烦，改的地方也比较多，我们把它稍微修改一下，也方便他人使用。

    /**
     * 限制请求
     * dataList 数据
     * limit 限制请求的数量
     * request 需要返回一个Promise对象
     */ 
    function limitRequest(dataList,limit,request){
        for(let i = 0;i < limit; i++){
            send(dataList,request);
        }
    }

    /**
     * 发送请求
     * dataList 数据
     * request 需要返回一个Promise对象
     */ 
    function send(dataList,request){
        let data = dataList.shift();
        if(data){
            console.log(`第${data}个请求开始发送`);
            request(data).then(res => {
                console.log(`第${res}个请求结束`);
                send(dataList,request);
            })
        }
    }

使用方式如下

    let data = [1,2,3,4,5,6,7,8,9,10];
    
    function request(data){
        return new Promise(resolve => {
            /**
             * 模拟发送请求的过程,setTimeout替换成实际的请求即可
             */
             setTimeout(() => {
                resolve(data);
         }, data*1000);
        })
    }
    limitRequest(data,3,request)

这样的话，使用者只需要关注请求的实现即可，而不需要关注内部的实现，更方便使用。