for循环中异步请求问题

今天遇到一个需求就是，需要在for循环中，进行axios异步请求。一般这个这个时候就遇到两个问题

1. 因为你的请求是在for循环中，而且又是异步的请求所以，请求出来的数据顺序错乱
2. 还有就是在for里 等所有的异步请求完成之后，再去处理数据。这时你就会发现。它是先走了异步请求下边的代码，因为这个是线程问题，在一个就是异步的，它不会等着你完成请求之后再去执行。因为JS运行在浏览器中,是单线程的

for (let i = 0; i < 5; i++) {
			setTimeout(function() { //这里一般是axios请求 现在模仿异步 看一下打印的结果
				console.log(i)
			}, Math.random() * 3000)
		}

会发现打印的下标他的顺序是错乱的

解决方案 利用es6 中的 let 和Promise.all方法来解决
biPromise.all方法就是专门来解决 多个异步处理的
biPromise的基础用法看这https://blog.csdn.net/qq_46124502/article/details/106500810

	let promiseList = []
		for (let i = 0; i < 5; i++) {
		//promiseList这里要放到push数组里，原因是  如果用变量。一直就是最后一个， 或者不用push的话 ，也可以用闭包的形式来
			promiseList.push(new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve(i)//如果想要返回多个数据resolve([v,i])
				}, Math.random() * 3000);
			}));
		}
		//放到循环外边  因为 rspList是一个数组
	Promise.all(promiseList).then((rspList)=> {
		    rspList.map((val)=> {
		        console.log(val);    
		    });
		});

当时你也可以用递归去实现。但递归影响运行速度，因为它不是并发的。

如果在所有异步请求完成之后再去处理数据，

let promiseList = []
		for (let i = 0; i < 5; i++) {
			promiseList.push(new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve(i)
				}, Math.random() * 3000);
			}));
		}
		Promise.all(promiseList).then((rspList)=> { //这个也可以接收多个Promise.all([promiseList,promiseList2])
		    rspList.map((val)=> {
		        console.log(val);    // 依次输出0-4
		    });
		}).then(()=>{
			console.log("所有异步请求已经完成")
		})
		 

希望可以帮助到你