js实现所有异步请求全部加载完毕后，loading效果消失
  在实际开发中，⼀定有情况是这样的，⼀个页⾯我们有多个地⽅请求了ajax，在这种情况下，我们要实现数据没来之前出现我们炫酷的loading效果，⽽且要等到所有的ajax都请求完毕后，才让我们的loading效果消失，那么问题来了，每个ajax请求数据的时间都是不确定的，我们这个loading效果结束的逻辑⼜应该放到哪⾥呢？就好⽐这样（伪代码模拟）：
console.log('loading效果图旋转中')
var timer1 =  setTimeout(() => {
console.log('第⼀个加载完成了');
}, '随机的时间');
var timer2 =  setTimeout(() => {
console.log('第⼆个加载完成了');
}, '随机的时间');
var timer3 =  setTimeout(() => {
console.log('第三个加载完成了');
}, '随机的时间');
console.log('loading效果图消失，我好慌，我应该放到哪⾥')
  是不是很难受，你说每个请求的结束时间都不确定，我哪知道我应该放到哪⾥结束，别怕，给⼤家提供两种解决⽅案，为了逻辑清晰，我就⽤⼀个延时器来给⼤家进⾏模拟了，莫要嫌弃:)
  第⼀种解决⽅案：我们设置⼀个标识，⽐如loadingNums，当loadingNums 等于0的时候，我们让loading消失，接下来看代码（应该⽤await和async来模拟的，但是重要的是思路，其他的不重要，你懂的）：
var loadingNums = 3;
console.log('loading效果图旋转中')
var timer1 =  setTimeout(() => {
console.log('第⼀个加载完成了');
loadingNums--;
if(loadingNums==0){
console.log('loading效果图消失')
}
}, 1000);
var timer2 =  setTimeout(() => {
console.log('第三个加载完成了');
loadingNums--;
if(loadingNums==0){
console.log('loading效果图消失')
}
}, 2000);
var timer3 =  setTimeout(() => {
console.log('第⼆个加载完成了');
loadingNums--;
if(loadingNums==0){
console.log('loading效果图消失')
}
}, 3000);
页⾯控制台打印效果：
  第⼆种解决⽅案：我们可以⽤ES6的Promise，如果有不了解Promise的同学⾃⾏去查询相关⽂档，接下来开始我们的操作，Promise有⼀个all⽅法，接代码运行js特效
收⼀个参数，这个参数我们可以传⼀个数组，在这个数组中我们可以写多个Promise，看到这⾥你应该明⽩了，我们可以把所有的异步操作都⽤Promise包起来，然后都放到这个数组内（漂亮，给⾃⼰的聪明才智⿎个掌好不好），如你所想，这个all⽅法是可以等到数组中所有的Promise加载完成之后才去执⾏的，那还等什么，准备发车，看代码：
console.log('loading效果图旋转中')
var p1 = new Promise(function(resolve,reject){
setTimeout(() => {
console.log('第⼀个加载完成了');
resolve();
}, 1000);
})
var p2 = new Promise(function(resolve,reject){
setTimeout(() => {
console.log('第三个加载完成了');
resolve();
}, 2000);
})
var p3 = new Promise(function(resolve,reject){
setTimeout(() => {
console.log('第⼆个加载完成了');
resolve();
}, 3000);
})
Promise.all([p1,p2,p3]).then(function(){
console.log('loading效果图消失');
})
页⾯控制台打印效果：
好了已经很晚了，各位晚安早点睡觉，保护好⾃⼰的头发~~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。