JavaScript实现并发请求

并发即在同一时间段内执行多个任务或者处理多个任务，这有什么用呢？比如在前端一些大文件的分片上传，如果分片后上传完成一个之后再上传，那么效率就会比较低，但是如果不限制，一次性都发送，那么又会太大，所以我们需要控制一下发送的数量，也就是在一次发送的队列中，最多允许多少个任务一起执行

思路分析

1. 任务定义：这个任务的结果只会成功，无论这个任务的结果是成功还是失败，都算做是成功的状态
2. 我们假设存在20个任务，并发数量为5，如果最大数量为5，是不是表示在第一次发送请求的时候，我们需要发送5个这样的任务
3. 需要任务的话，那么首先我们就需要有这个任务，也就是说我们要封装一个异步请求函数，而每次并发执行的任务其实就是调用一次这个函数
4. 那当最开始发送的5个任务中当其中某一个完成之后，又应该进行怎么样的操作呢？比如第二个任务完成了，其他四个任务还在进行中，此时任务队列的任务数量为4，那么我们就要在这个任务执行完成的时候去调用下一个任务
5. 那怎么调用下一个任务呢？上传的是分片的文件数据，那么就会有一个存储这个分片数据的数组吧，数组怎么取值呢？是不是通过索引就可以呢？所以当第二个任务完成的时候，只需要通过 arr[i] 就可以获取下一个分片的数据了，并利用我们封装好的函数将其包装为一个任务，进行发送
6. 所以为了得到这个 i 的值，那么每当封装的任务进入发送队列之后，就需要将索引+1，从而取下一个任务，而有了这个执行逻辑之后，我们就可以实现一个维持固定数量执行的任务队列了
7. 比如最开始的发送了5个任务，也就意味着索引自增了5次，那么第二个任务完成了，又因为索引的自增，就可以顺序的取到下一个任务，将这个任务进入到一开始第二个的任务队列位置进行发送，在这个基础上不停的循环，从而实现并发请求

具体实现

1. 准备数据

   const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
   

2. 这里就简单的用一些数字了，封装一个函数，将数据包裹为一个异步请求任务

   function uploadData(value) {
   	return new Promise((resolve, reject) => {
   		// 模拟请求
   		setTimeout(() => {
   			resolve(`数据【${value}】执行完成`)
   		}, 1000)
   	})
   }
   

3. 现在就要开发编写真正实现并发请求的方法了，这个方法，根据分析，应该接收两个参数，数据和最大数量，返回是一个Promise对象，当所有请求完成之后执行成功，如下：

   function concurrentRequests(list, maxNum) {
   	return new Promise(resolve => {})
   }
   

4. 再次基础上，我们还需要什么，是不是需要定义数组来接收每个任务执行完成后的结果呢，成功和失败都放入进来

   function concurrentRequests(list, maxNum) {
     const result = []
     
     return new Promise(resolve => {
       
     })
   }
   

5. 在这个函数内部，我们还需要一个函数来帮助我们取数据，并调用 uploadData 发送任务，并或结果存入 result 数组

   function concurrentRequests(list, maxNum) {
   	const result = []
   	let index = 0
   
   	return new Promise(resolve => {
   		// 定义函数
   		async function request() {
   			// 保存索引-可以保证存储的结果和原始数据数组的顺序一致
   			const i = index
   			// 调用一次之后索引自增
   			index++
   			try {
   				// 接受成功的结果
   				const resp = await uploadData(list[i])
   				// 利用保存的索引存入结果数组
   				result[i] = resp
   			} catch (error) {
   				// 失败的结果也保存
   				request[i] = error
   			} finally {
   				// 无论成功或失败，在在此处执行，重新调用 request 方法
   				//  - 同时保证不会取到空的数据发送
   				if (index < list.length) {
   					request()
   				}
   			}
   		}
   	})
   }
   

6. 现在就应该根据最开始的 maxNum 来决定发送时的数量

   function concurrentRequests(list, maxNum) {
   	const result = []
   	let index = 0
   
   	return new Promise(resolve => {
   		async function request() {
   			const i = index
   			index++
   			try {
   				const resp = await uploadData(list[i])
   				result[i] = resp
   			} catch (error) {
   				request[i] = error
   			} finally {
   				if (index < list.length) {
   					request()
   				}
   			}
   		}
           
           // 使用循环来达到队列发送任务数量
   		for (let i = 0; i < maxNum; i++) {
   			request()
   		}
   	})
   }
   

7. 为什么使用循环可以呢，这样不是还是一次一次的发送吗，这是因为在循环中是同步的，而任务是异步的，所以就说只有当同步任务执行完成之后才会执行异步

8. 那什么时候才算成功呢？是直接判断当索引等于数组长度-1吗？那肯定不行，当最后一个任务完成的时候，此时索引已经满足数组长度-1了，但是你无法保证和他一个在一个队列的任务已经完成了，所以我们还要定义一个变量，来确定是否完成

   const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
   
   function uploadData(value) {
   	return new Promise((resolve, reject) => {
   		// 模拟请求
   		setTimeout(() => {
   			resolve(`数据【${value}】执行完成`)
   			console.log(`上传数据【${value}】完成`)
   		}, getRandomInt(1, 3) * 1000)
   	})
   }
   
   // 生成随机数
   function getRandomInt(min, max) {
   	return Math.floor(Math.random() * (max - min + 1)) + min
   }
   
   function concurrentRequests(list, maxNum) {
   	const result = [] // 结果数组
   	let index = 0 // 索引
   	let count = 0 // 完成的任务计数
   
   	return new Promise(resolve => {
   		async function request() {
   			const i = index
   			index++
   			try {
   				const resp = await uploadData(list[i])
   				result[i] = resp
   			} catch (error) {
   				request[i] = error
   			} finally {
   				// 计数+1
   				count++
   				if (count === list.length) {
   					resolve(result)
   				}
   
   				if (index < list.length) {
   					request()
   				}
   			}
   		}
   		for (let i = 0; i < maxNum; i++) {
   			request()
   		}
   	})
   }
   
   concurrentRequests(data, 5).then(res => {
   	console.log(res)
   })
   

9. 剩下的就是一些细节的判断了

   const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
   
   function uploadData(value) {
   	return new Promise((resolve, reject) => {
   		// 模拟请求
   		setTimeout(() => {
   			resolve(`数据【${value}】执行完成`)
   			console.log(`上传数据【${value}】完成`)
   		}, getRandomInt(1, 3) * 1000)
   	})
   }
   
   // 生成随机数
   function getRandomInt(min, max) {
   	return Math.floor(Math.random() * (max - min + 1)) + min
   }
   
   function concurrentRequests(list, maxNum) {
   	const result = [] // 结果数组
   	let index = 0 // 索引
   	let count = 0 // 完成的任务计数
   
   	return new Promise(resolve => {
       async function request() {
         if (!list.length) { 
           // 数组没有数组时返回空数组
           resolve([])
         }
   
   			// 保存索引-可以保证存储的结果和原始数据数组的顺序一致
   			const i = index
   			// 调用一次之后索引自增
   			index++
   			try {
   				// 接受成功的结果
   				const resp = await uploadData(list[i])
   				// 利用保存的索引存入结果数组
   				result[i] = resp
   			} catch (error) {
   				// 失败的结果也保存
   				request[i] = error
   			} finally {
   				// 计数+1
   				count++
   				if (count === list.length) {
   					resolve(result)
   				}
   
   				// 无论成功或失败，在在此处执行，重新调用 request 方法
   				//  - 同时保证不会取到空的数据发送
   				if (index < list.length) {
   					request()
   				}
   			}
   		}
   
   		// 当数组长度小于并发数时
   		for (let i = 0; i < Math.min(list.length, maxNum); i++) {
   			request()
   		}
   	})
   }
   
   concurrentRequests(data, 5).then(res => {
   	console.log(res)
   })
   

10. 现在增加一些输出语句，查看结果

    function uploadData(value) {
    	console.log(`start：数据【${value}】...`)
    	return new Promise((resolve, reject) => {
    		// 模拟请求
    		setTimeout(() => {
    			resolve(`数据【${value}】执行完成`)
    			console.log(`end：数据【${value}】`)
    		}, getRandomInt(1, 3) * 1000)
    	})
    }
    
    concurrentRequests(data, 5).then(res => {
    	console.log(res)
    })
    

11. 结果如图：

    

12. 可以看到，因为随机的原因，导致执行完成的顺序虽然不一致，但是还是保证了结果与数据源的顺序一致

源码展示

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

// 模拟上传数据方法
function uploadData(value) {
	console.log(`start：数据【${value}】...`)
	return new Promise((resolve, reject) => {
		// 模拟请求
		setTimeout(() => {
			resolve(`数据【${value}】执行完成`)
			console.log(`end：数据【${value}】`)
		}, getRandomInt(1, 3) * 1000)
	})
}

// 生成随机数
function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min
}

function concurrentRequests(list, maxNum) {
	const result = [] // 结果数组
	let index = 0 // 索引
	let count = 0 // 完成的任务计数

	return new Promise(resolve => {
		async function request() {
			if (!list.length) {
				// 数组没有数组时返回空数组
				resolve([])
			}

			// 保存索引-可以保证存储的结果和原始数据数组的顺序一致
			const i = index
			// 调用一次之后索引自增
			index++
			try {
				// 接受成功的结果
				const resp = await uploadData(list[i])
				// 利用保存的索引存入结果数组
				result[i] = resp
			} catch (error) {
				// 失败的结果也保存
				request[i] = error
			} finally {
				// 计数+1
				count++
				if (count === list.length) {
					resolve(result)
				}

				// 无论成功或失败，在在此处执行，重新调用 request 方法
				//  - 同时保证不会取到空的数据发送
				if (index < list.length) {
					request()
				}
			}
		}

		// 当数组长度小于并发数时
		for (let i = 0; i < Math.min(list.length, maxNum); i++) {
			request()
		}
	})
}

concurrentRequests(data, 5).then(res => {
	console.log(res)
})