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效果图消失');
})
页⾯控制台打印效果:
好了已经很晚了,各位晚安早点睡觉,保护好⾃⼰的头发~~~