js实现所有异步请求全部加载完毕后，loading效果消失

Posted 2021-01-28 渴望成为大牛的男人

　　在实际开发中，一定有情况是这样的，一个页面我们有多个地方请求了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方法，接收一个参数，这个参数我们可以传一个数组，在这个数组中我们可以写多个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效果图消失\');
    })

 

页面控制台打印效果：

 

 

 

好了已经很晚了，各位晚安早点睡觉，保护好自己的头发~~~