背景介绍

当我们的一个页面有大量的请求，将用到并发请求，如何实现循环请求，限量并发是我们这次讨论的重点，下面一张表格表示各大浏览器的最大并发连接数目,对于大文件上传也是必不可少的。

浏览器	HTTP / 1.1	HTTP / 1.0
IE 11	6	6
火狐	6	6
Safari 3,4	4	4
Chrome 4+	6	6
iphone5	6	?
Android2-4	4	?

代码实现

// 看着是否很眼熟，参考的是vue的watcher类的实现
class Scheduler {
    constructor(limit){
    	// 最大并发量
        this.maxCount = limit
        // 所有需要发送的请求，添加到数组
        this.list = []
        // 记录当前正在请求的promise数量
        this.temRunIndex = 0
    }
    // 添加异步请求
    add(promiseCreator) {
        this.list.push(promiseCreator)
    }
    // 开始发送请求
    taskStart(callback) {
    	this.callback = callback
        for(let i = 0;i<this.maxCount;i++) {
            this.request()
        }
    }
    // 递归调用
    request() {
        // 边界值
        if(!this.list || !this.list.length || this.temRunIndex >= this.maxCount) return
        this.temRunIndex++
        this.list.shift()()
            .then(res => {
				//...doing
                this.callback && this.callback(res)
            }).catch(err=>{
				//...doing
            }).finally(res=>{
                this.temRunIndex--
                this.request()
            })
    }
}

function ajax(time) {
    return new Promise(resolve => {
        setTimeout(resolve, time)
    })
}

var scheduler = new Scheduler(2)
function addTask(time, order) {
    scheduler.add(()=> ajax(time).then(()=>console.log(order)))
}

addTask(1000, 1)
addTask(500, 2)
addTask(300, 3)
addTask(400, 4)
scheduler.taskStart()
// scheduler.taskStart((data)=>{
	// 对返回的数据做一些处理
// })

结束

感谢大家的利用宝贵时间，阅读这篇文章，对您产生帮助，不要忘了点赞喔😯

参考资料

my.oschina.net/u/4676704/b…